为了复制我的问题，我编写了一个带有 2 个 Bootstrap 列的简单 HTML，我希望我的第二列有多个 <p> items ，每一项都在另一项下方，但是当 <p> 中包含字符串时，就会出现问题标签的长度不同，因为我希望它们位于列的中心，但也从相对于 X 轴的相同位置开始。
<body>
<h2 class="text-center my-5">
title
</h2>
<div class="container">
<div class="row">
<div class="col-md-6 ">
Some unrelated text
</div>
<div class="col-md-6">
<p>Small text</p>
<p>A much longer text</p>
</div>
</div>
</div>
本质上，我希望字符串“更长的文本”正好位于“小文本”下方，这样它看起来像这样:
Small text
A much longer text
而不是
Small text
A much longer text
我尝试使用 text-align:center 以及使用 flexbox 和align-items:center 设置列样式，但它们都会产生相同的结果。
最佳答案
首先，您需要向您的列添加一个 d-flex justify-content-center 类，然后向您的 p 添加一个 div 父级标签，这样你的代码就会像这样
<div class="container">
<div class="row">
<div class="col-md-6 ">
Some unrelated text
</div>
<div class="col-md-6 d-flex justify-content-center">
<div>
<p>Small text</p>
<p>A much longer text</p>
</div>
</div>
</div>
</div>
关于html - 如何将 Bootstrap 列中的元素居中，以便每个元素都从相对于 X 轴的相同位置开始？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/70131139/