html - 无法使行中的列居中

Question

我将一列放在容器内的一行内。该列应居中对齐，文本也应居中对齐。到目前为止，文本是居中对齐的，但不是列。

这是 HTML 和 CSS -

HTML -

<section id="raised-section" class="main main-raised">
        <div class="container">
            <div class="text-section text-center">
                <div class="row">
                    <div class="col-md-8 pos-center">
                        <h1 class="ft-roboto" style="font-weight: 800; color: #3C4858;">Sample Heading</h1>
                        <p class="ft-raleway" style="font-size: 1.15em; color: #999;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

CSS -

.main {
    background-color: #fff;
    position: relative;
    z-index: 3;
}
.main-raised {
    margin: -100px 30px;
    border-radius: 0.5em;
    box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14),
                0 6px 30px 5px rgba(0, 0, 0, 0.12),
                0 8px 10px -5px rgba(0, 0, 0, 0.2); 
}
.text-section {
    padding: 70px 0;
}
.pos-center {
    margin-right: auto;
    margin-left: auto;
}

仍然没有运气。请帮帮我，我遗漏了一些导致 alignment to be like this 的东西

Answer 1

Bootstrap 有一个 grid system由 12 列组成。

你的 div 占用了 8 所以还剩下 4，你可以使用 col-md-offset-2 把它从左边推两列，把 2 留在右边，同时删除你定义的边距，因为它覆盖了 boostap 的。

我将部分中的边距 -100px 替换为 100px 这样我们就可以看到了。

.main {
  background-color: #fff;
  position: relative;
  z-index: 3;
}

.main-raised {
  margin: 100px 30px;
  border-radius: 0.5em;
  box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.2);
}

.text-section {
  padding: 70px 0;
}

.pos-center {
  /*margin-right: auto; REMOVED*/
  /*margin-left: auto; REMOVED*/
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<section id="raised-section" class="main main-raised">
  <div class="container">
    <div class="text-section text-center">
      <div class="row">
        <div class="col-md-offset-2 col-md-8 pos-center">
          <h1 class="ft-roboto" style="font-weight: 800; color: #3C4858;">Sample Heading</h1>
          <p class="ft-raleway" style="font-size: 1.15em; color: #999;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        </div>
      </div>
    </div>
  </div>
</section>