如何居中而不是左對齊div

Question

我試圖將這些div水平居中，但它們堆疊在一起，然后左對齊。

如何讓它們水平對齊中心，使它們看起來像這樣：

 .logos{ margin-left: -32px; margin-bottom: 15px; } .logos ul li{ float: center; width: 210px; height: 100px; line-height: 100px; border: 1px solid #86a7cb; background: #fff; text-align: center; margin-left: 32px; } .logos ul li a{ display: inline; border: 1px solid #86a7cb; } .logos ul li img{ max-height: 90%; max-width:99%; height: auto; horizontal-align: middle; display: inline; border: 1px solid #86a7cb; } 

 <div class="logos ul"> <ul> <li> <a href="#">My Item 1</a> </li> <li> <a href="#">My Item 2</a> </li> </ul> <div class="clear"></div> </div> 

Answer 1

您可以將標記放在div ，並將該div設為flexbox，並將justify-content : center添加到其中。 另外，將float : left添加到.logos ul以確保它們是並排的。 見： -

 #wrapper{ display : flex; justify-content : center; } .logos{ margin-left: -32px; margin-bottom: 15px; } .logos ul li{ float: left; width: 210px; height: 100px; line-height: 100px; border: 1px solid #86a7cb; background: #fff; text-align: center; margin-left: 32px; } .logos ul li a{ display: inline; border: 1px solid #86a7cb; } .logos ul li img{ max-height: 90%; max-width:99%; height: auto; vertical-align: middle; display: inline; border: 1px solid #86a7cb; } 

 <div id="wrapper"> <div class="logos ul"> <ul> <li> <a href="#">My Item 1</a> </li> <li> <a href="#">My Item 2</a> </li> </ul> <div class="clear"></div> </div> </div> 

Answer 2

ul {
    text-align: center;
}

li {
    display:inline-block;
    float: left;
}

另外，如果你想讓li元素在ul元素上水平均勻分布，試試這個：

    ul{
    text-align: justify;
    width: 300px;
    display:block;
    margin-left:auto;
    margin-right:auto;
   }

ul:after{
    content: '';
    width: 100%; 
    display: inline-block;
}

li {
    display:inline-block;
}

看看jsfiddle： https ：//jsfiddle.net/0zokhm3w/

Answer 3

看看中心對齊列表

訣竅是應用display:inline-block; 列出元素並應用text-align:center; 外部的div。