html - 居中内容 - 然后左对齐 Bootstrap 4

Question

目标:使用 Bootstrap 4 将文本置于屏幕中央，但仍向左对齐。无论元素的长度如何，它都应该有效。

                            List Item
                            Longer List Item
                            Longer List Item With Lots of Info
                            Short

让元素居中很简单，但让他们左对齐就很困难了。有什么建议吗？

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.css" rel="stylesheet"/>
<div class="col text-center">
<p> List Item </p> 
<p> Longer List Item </p> 
<p> Longer List Item With Lots of Info </p> 
<p> Short </p> 
</div>

Answer 1

创建一个动态或固定宽度的内部div(外部容器的百分比是一个不错的选择)

.inner {
  text-align: left;
  margin: 0 auto;
  width: 25%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.css" rel="stylesheet" />

<div class="col text-center">
  <div class="inner">
    <p> List Item </p>
    <p> Longer List Item </p>
    <p> Longer List Item With Lots of Info </p>
    <p> Short </p>
  </div>
</div>