无法使行中的列居中

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 有一个包含 12 列的 grid system。

你的 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>

无法使行中的列居中

Unable to center the column in row

html

css

css-position

twitter-bootstrap-3