css - 在移动设备上将列内的文本居中

Question

我正在努力让一些文本在移动 View 中的页面部分(类 about)居中。请注意，所有内容都在类 container-fluid 的 div 中。此部分还存在一个问题，空白区域出现在两侧，没有用背景颜色填充(现在通过将颜色添加到主体来修复，但我正在考虑相关的原因) .我希望它能填充屏幕宽度的 80%。

CodePen

HTML(受影响的部分):

        <section class="about" id="about">
          <div class="row">
            <div class="col">
              <h2>About</h2>
            </div>
          <div class="row">
            <div class="col-md-5">
              <img src="img/circle-portrait-small.png" class="portrait">
            </div>
            <div class="col-md-7">
              <p>.....</p>
            </div>
          </div>
        </section>

CSS:

.about {
  padding: 3em 0;
}

.about p {
  text-align: left;
  width: 80%;  

}

/* Not sure why this is needed */
.about .row {
  width: 100%;
}

@media screen and (max-width: 767px) {
  .about {
    padding: 2em;
  }

  .about p {
    font-size: 15px;
  }

  .portrait {
    height: 250px;
    margin-bottom: 1em;
  }
}

Answer 1

随机空间看起来是由 row 上设置的负边距引起的元素:

.row {
    margin-right: -15px;
    margin-left: -15px;
}

删除它，你应该失去空间。对于移动设备上的段落居中，您的 p 似乎是元素已经占据了其父元素的 80%，因此要使其居中只需添加以下内容:

.about p {
    margin:0 auto;
}

从视觉上看，它看起来像您的 p在 767px 断点之后，元素占用的宽度远小于其父元素的 80%，那是因为你在 col 上设置了填充, about和 container-fluid元素。删除或减少断点处的填充，段落将开始占用您要查找的空间。