如何让Bootstrap列内元素居中的同时所有元素X轴起始位置一致

你要实现的核心是「所有<p>标签组成的文本块整体在右侧列水平居中，同时每个<p>内的文本左对齐」，之前的方法不符合需求的原因：

• 给列加text-align: center是让每个<p>内部的文本单独居中，短文本左右自然会留空，和长文本无法左对齐
• align-items: center是flex布局的垂直方向对齐属性，不影响水平方向的对齐逻辑，所以没有效果

方案1：嵌套容器配合flex布局（兼容性好，无需额外自定义CSS） #

直接用Bootstrap自带的工具类修改第二列结构即可：

<div class="col-md-6 d-flex justify-content-center">
  <!-- 内层容器宽度由最长的p元素决定，整体在列内居中 -->
  <div>
    <p>Small text</p>
    <p>A much longer text</p>
  </div>
</div>

逻辑说明：外层列设置为flex容器，水平居中内部元素；内层无样式div的宽度由内容宽度（也就是最长的那段文本的宽度）决定，div里的p元素默认左对齐，自然所有p的左起始位置完全一致，同时整个文本块在列内居中。

方案2：直接给p元素设置适配宽度（代码更简洁，适合少量元素） #

如果你不想多套一层div，可以直接给每个p元素加Bootstrap工具类：

<div class="col-md-6">
  <p class="w-fit mx-auto text-start">Small text</p>
  <p class="w-fit mx-auto text-start">A much longer text</p>
</div>

逻辑说明：w-fit让p的宽度刚好贴合内容宽度，mx-auto设置左右自动边距让每个p在列内水平居中，text-start保证p内文本左对齐，最终效果和方案1完全一致。
如果是Bootstrap4版本没有内置w-fit类，自己补充一行CSS即可：.w-fit { width: fit-content; }

内容的提问来源于stack exchange，提问作者Jose Delgado