Bootstrap 4在col中的中心列表和列表中的左对齐文本[重复]

Question

我有以下演示代码用于制作链接列表：

<div class="container-fluid">
  <div class="row justify-content-center">
     <div class="col-auto col-md-3">
         <ul class="list-unstyled">
             <li>First List Item</li>
             <li>Second list item</li>
         </ul>
    </div>   
    <div class="col-auto col-md-3">
          <ul class="list-unstyled">
             <li>First List Item</li>
             <li>Second list item</li>
          </ul>
    </div>
     <div class="col-auto col-md-3">
         <img src="http://placekitten.com/g/200/300" >
    </div>   
   </div>
 </div>

你可以在这个codeply看到结果

当屏幕很小时，所有列都在空间中居中。但是，当屏幕尺寸较大时，我希望列之间有更多空间。所以我使用 Bootstrap 实用程序类将列设置为 col-md-2。

问题是我希望文本在列表中左对齐（它是）并且列表本身在每一列中居中，以便整行的内容看起来在页面上居中。

目前，每个列表在每一列中都是左对齐的。

与已经提出这个问题的评论相反，它没有在这个特定的上下文中。 我问的是垂直列表居中，而不是水平对齐的列表。

我不是在问如何仅水平对齐列表，而是如何将内容居中并在列表中居中，同时保持每个列表中的文本左对齐。

Answer 1

我找到了一种使用 Bootstrap 4 flex 实用程序类的方法，如下所示：

<div class="container-fluid">
  <div class="row justify-content-center">
     <div class="col-auto col-md-3 d-flex justify-content-center">
         <ul class="list-unstyled">
             <li>First List Item</li>
             <li>Second list item</li>
         </ul>
    </div>   
    <div class="col-auto col-md-3 d-flex justify-content-center">
          <ul class="list-unstyled">
             <li>First List Item</li>
             <li>Second list item</li>
          </ul>
    </div>
     <div class="col-auto col-md-3 d-flex justify-content-center">
         <img src="http://placekitten.com/g/200/300" >
    </div>   
   </div>
 </div>

这里是codeply

Answer 2

尝试使用 d-flex bootstrap(4.3.1) 类来满足您的要求： https://getbootstrap.com/docs/4.0/utilities/flex/

  <div class="container-fluid">
  <div class="row d-flex justify-content-start">
     <div class="col-auto col-md-3">
         <ul class="list-unstyled">
             <li>First List Item</li>
             <li>Second list item</li>
         </ul>
    </div>   
    <div class="col-auto col-md-3">
          <ul class="list-unstyled">
             <li>First List Item</li>
             <li>Second list item</li>
          </ul>
    </div>
     <div class="col-auto col-md-3">
         <img src="http://placekitten.com/g/200/300" >
    </div>   
   </div>
 </div>

如果这不是您的要求，请告诉我！！

Answer 3

添加

ul{
  margin-left: 50%;
    transform: translateX(-50%);
}

。这是你想要的吗？？？检查下面的链接 https://codepen.io/Xenio/pen/yrYVMM

ul{
  margin-left: 50%;
    transform: translateX(-50%);
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<div class="container-fluid">
      <div class="row justify-content-center">
         <div class="col-auto col-md-4">
             <ul class="list-unstyled">
                 <li>First List Item</li>
                 <li>Second list item</li>
             </ul>
        </div>   
        <div class="col-auto col-md-4">
              <ul class="list-unstyled">
                 <li>First List Item</li>
                 <li>Second list item</li>
              </ul>
        </div>
         <div class="col-auto col-md-4">
             <img src="http://placekitten.com/g/200/300" >
        </div>   
       </div>
     </div>