Question

我希望将div中的所有元素（实际上是一个引导列）同时保持文本左对齐。所以我的代码看起来像这样：我希望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>

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

希望它有所帮助。

CSS：将div中的元素居中，同时保持文本左对齐

1 个答案: