html - ul 列表不居中(css 和 html)

Question

<div class="companies">
        <ul class="logos">
        <li><img src="images/image1.png" alt="" height="25px" /></li>
        <li><img src="images/image2.png" alt="" height="25px" /></li>
        <li><img src="images/image3.png" alt="" height="25px" /></li>
        <li><img src="images/image4.png" alt="" height="25px" /></li>
        <li><img src="images/image5.png" alt="" height="25px" /></li>
        </ul>
        </div>

/* Logos */
.companies {
    width:100%;
}


ul.logos {
    list-style:none;
    margin:0 auto;
}

ul.logos li {
    display: inline-block;
    padding: 0 1em 0 0;
    vertical-align: middle;
}

ul 列表仍然粘在左边，并且没有像使用 margin:0 auto 时预期的那样居中；

我不想指定宽度，我希望它根据屏幕大小调整列表的大小。

Answer 1

您可以通过设置它的容器 div CSS 属性文本对齐来将它居中。

.companies{
    width:100%;
    text-align:center;
}