我如何将 html “ul” 元素置于 bootstrap 4（水平 + 垂直）内部<section><div class="row"><div class="col-sm"></div><div id="text_translate"><p>如何将 html“ <strong>ul</strong> ”元素在 bootstrap4（水平 + 垂直）中居中，水平对齐“ <strong>li</strong> ” </p><p></p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"><div class="snippet-code"><pre class="snippet-code-html lang-html prettyprint-override"> &lt;section&gt; &lt;div class='row'&gt; &lt;div class='col-sm'&gt; &lt;ul&gt; &lt;li&gt;A&lt;/li&gt; &lt;li&gt;B&lt;/li&gt; &lt;li&gt;C&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;/div&gt; &lt;/section&gt;</pre></div></div><p></p></div></div></section>

Question

How to center html " ul " element in bootstrap4 (horizontal + vertical) with horizontal aligned " li "

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

Answer 1

If you use this code the list will be displayed in the center of the yellow box. I don't know why it won't work on the code preview on stackoverflow, but here you can see that it works.

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