Css 引导4列中的列表居中，列表中的文本左对齐

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

<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>

第一个清单项目
第二个清单项目


第一个清单项目
第二个清单项目

你可以从中看到结果

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

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

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

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

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

尝试使用d-flex引导（4.3.1）类来满足您的要求：

第一个清单项目
第二个清单项目


第一个清单项目
第二个清单项目

如果这不是你的要求，让我知道

添加

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

。这就是你想要的吗？？。检查下面的链接

ul{
左边距：50%；
转化：translateX（-50%）；
}

第一个清单项目
第二个清单项目


第一个清单项目
第二个清单项目

我找到了一种使用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>

第一个清单项目
第二个清单项目


第一个清单项目
第二个清单项目

---

这是

我希望内容以页面为中心，但在每列文本左对齐的情况下，文本仅左对齐。你能给我看一张截图吗？刚刚加了一张截图。你可以看到内容向左倾斜，因为文本是左对齐的，每个列中的无序列表也是如此。我需要UL在每个列中居中。是的，这就是我想要的谢谢。不过我很好奇，引导中没有内置的实用程序类来将列中的内容居中？试试文本中心这将对齐左侧的内容。我希望列的内容以每列为中心，同时保持文本在每个无序列表的左侧对齐。

<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>