Bootstrap中如何实现行内DIV文本顶部对齐且整体居中？

嗨，我来帮你搞定这个问题！其实核心是搞清楚Bootstrap flex布局的层级关系，两个效果完全可以共存，之前的冲突大概率是居中的方式用错了。

先理清楚两个需求的正确实现方式 #

1. 让row内的DIV元素文本顶部对齐

Bootstrap的row默认是flex容器，里面的列默认会被拉伸到和最高列一样的高度。要让某一列的内容顶部对齐，不要用align-top（这个类更多是针对inline元素的），而是给目标列加align-self-start类——这个类专门用于flex容器内的单个项目，让它在垂直方向上靠顶部对齐，不会影响其他列的布局。

如果是列内部的元素要顶部对齐，还可以给列加d-flex align-items-start，把列变成flex容器，内部元素就会自动顶部对齐。

2. 让整个DIV（row）在section中水平居中

这里的关键是：要让row本身有明确的宽度，再用居中类，不然居中不会生效。有两种常用方法：

• 方法一：用container包裹row。Bootstrap的container默认自带水平居中的样式，还会根据屏幕宽度自动调整最大宽度，是最省心的方式。
• 方法二：直接给row加mx-auto（左右自动margin），同时给row设置列宽类（比如col-10 col-md-8），这样row有了固定的相对宽度，mx-auto就能让它在section里居中。

完整代码示例 #

方法一：用container实现居中+顶部对齐

<section class="py-4"> <!-- 加个padding让内容不贴边 -->
  <div class="container">
    <div class="row">
      <!-- 这个列的内容会顶部对齐 -->
      <div class="col align-self-start">
        <p>我是顶部对齐的文本</p>
      </div>
      <!-- 这个列用来对比，高度更高 -->
      <div class="col">
        <p>我是高度比较高的内容<br>第二行文本<br>第三行文本</p>
      </div>
    </div>
  </div>
</section>

方法二：用mx-auto+列宽实现居中+顶部对齐

<section class="py-4">
  <!-- row设置宽度+左右自动margin，实现整体居中 -->
  <div class="row mx-auto col-10 col-md-8">
    <div class="col align-self-start">
      <p>我是顶部对齐的文本</p>
    </div>
    <div class="col">
      <p>我是高度比较高的内容<br>第二行文本<br>第三行文本</p>
    </div>
  </div>
</section>

为什么之前会冲突？ #

你之前加居中类后顶部对齐失效，大概率是这两个原因：

• 用了text-center（文本居中）代替了容器居中，这个类只会让文本水平居中，还可能和flex对齐类产生冲突；
• 给row加了justify-content-center但没设置宽度，这个类是让row内部的列居中，而不是让row本身在section里居中，反而会打乱列的布局，导致顶部对齐失效。

内容的提问来源于stack exchange，提问作者Quinton Vorstman