CSS:在 div 中居中元素，同时保持文本左对齐

Question

我希望将所有元素都放在我的 div(实际上是 Bootstrap 列)中，同时保持其中的文本左对齐。所以我的代码看起来像这样:我希望 p、span 和 a 水平居中，而它们的内容(文本)应该左对齐。

<div class='col-sm-4 col-md-4'>
  <p>...</p>
  <span>...</span>
  <a>...</a>
</div>

(列数各不相同，我这里有 3 列，但实际上可能会更多)。

我试图在我的 CSS 中做的是根据列数添加一些百分比的左填充。它确实工作得很好，但我相信有一种更简单的方法可以实现这一点。

Answer 1

顺便说一下，不要忘记添加“class=”；)。

如果我没理解错的话，有两种可能性。

首先:

<div class="col-md-12">
<div class="col-md-4 .col-md-offset-4">
   <p>...</p>
   <span>...</span>
   <a>...</a>
</div>
</div>

这将创建“col-md-4”的偏移量。因此，4 - 4 - 4，它将居中。

另一个更简洁的解决方案是:

<div class="col-md-12">
<div class="wrapper" style="width:300px;position:relative;margin-left:auto;margin-right:auto;">
   <p>...</p>
   <span>...</span>
   <a>...</a>
</div>
</div>

这样您就可以创建一个通过自动设置左右边距居中的包装器。对于该解决方案，您需要提供位置(相对等，但不是静态的)和宽度!

希望对您有所帮助。