html - 居中并向左对齐- bootstrap

我试图弄清楚如何使项目列表位于页面中心但向左对齐，以便它们齐平。我正在使用引导程序。
例：


我想要页面中央的文本-左对齐

<ul class='text-center'>
 <li class='text-left'> Short Item #1 </li>
 <li class='text-left'> Much Longer Item #2 </li>
 <li class='text-left'> Short Item #3 </li>
 <li class='text-left'> Much Much Longer Item #3 </li>
</ul>

最佳答案

以下解决方案特定于Bootstrap 4，但允许您将内容确定宽度的元素居中：

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">

<div class="container-fluid">
  <div class="row bg-light">
    <div class="col-auto mx-auto">
      <ul class="bg-secondary text-light">
      <li>Short Item #1</li>
      <li>Much Longer Item #2 </li>
      <li>Short Item #3</li>
      <li>Much Much Longer Item #3</li>
      </ul>
    </div>
  </div>
</div>

.col-auto类还接受断点，因此您可以通过在不同的断点处强制使用不同的列行为来增强响应能力。 mx-auto类强制将左右边距设置为均匀，从而使列在屏幕上居中。

关于html - 居中并向左对齐- bootstrap ，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/50296772/