时间戳

首页 > 解决方案 > 无法将行中的列居中

html - 无法将行中的列居中

问题描述

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

这是 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;
}

仍然没有运气。请帮帮我，我错过了一些导致对齐方式像这样的东西

标签： htmlcsstwitter-bootstrap-3css-position

解决方案

Bootstrap 有一个由 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>

推荐阅读