我如何在 <section><div class='row'><div class='col-sm'> 内的引导程序 4（水平 + 垂直）中居中 html“ul”元

Posted 2023-03-29

【中文标题】我如何在 <section><div class=\'row\'><div class=\'col-sm\'> 内的引导程序 4（水平 + 垂直）中居中 html“ul”元素

【英文标题】：How I center html "ul" element in bootstrap 4 (horizontal + vertical) inside <section><div class='row'><div class='col-sm'>我如何在 <section><div class='row'><div class='col-sm'> 内的引导程序 4（水平 + 垂直）中居中 html“ul”元素

【发布时间】：2020-11-25 13:57:39

【问题描述】：

如何在bootstrap4（水平+垂直）中居中html“ul”元素，水平对齐“li”

<section>
   <div class='row'>
      <div class='col-sm'>
            <ul>
                 <li>A</li>
                 <li>B</li>
                 <li>C</li>
            </ul>
      </div>
   </div>
</section>

【参考方案1】：

如果您使用此代码，列表将显示在黄色框的中心。我不知道为什么它在***上的代码预览上不起作用，但是here你可以看到它起作用了。

<section>
   <div class='row'>
      <div class='col-sm' style="background-color: yellow; display:grid;height: 100%">
            <ul style="margin: center;">
                 <li>A</li>
                 <li>B</li>
                 <li>C</li>
            </ul>
      </div>
   </div>
</section>

【讨论】：

如何使“li”水平对齐？你能知道为什么你的代码在代码 sn-p 中不起作用，请更新你的答案

要水平对齐，你所要做的就是添加float: left;列表样式类型：无；填充左：15px；对于每个 li-Tag，您可以使用我的第一个答案中的链接找到一个示例，是的，我知道为什么代码在 *** 上不起作用，因为 margin:auto 在代码 sn-p 中不起作用，但我没有不知道为什么它不能在 sn-p 中工作。

但我认为在您自己的网站上，一切都应该像我的示例中那样工作