Question

以下内联块li元素不是完全居中的，如果需要，我可以发送完整的代码。你知道如何让他们完全居中，保持他们的位置是默认的吗？

  <div id="abovenavigation">

        <ul id="container">

            <li><a href="index.html"><h1 class="Home">HOME</h1></a></li><!--
            --><li><h1 class="About">ABOUT</h1></li><!--
            --><li><h1 class="Blog">BLOG</h1></li><!--
            -->

        </ul><!--ends container--> 

        </div><!--ends upper navigation-->


<div id="undernavigation">

            <ul id="container">
            <li><a href="https://www.facebook.com/Albus.Severus.Vitanza" target="_blank"><img class="facebook" src="Facebook.png" width="53px" height="50px" onclick="this.src='Facebookhov.png'" onmouseover="this.src='Facebookhov.png'" onmouseout="this.src='Facebook.png'"/></a></li>
            <li><a href="https://twitter.com/Promoetheus" target="_blank"><img class="twitter" src="Twitter.png" width="53px" height="50px" onclick="this.src='Twitterhov.png'" onmouseover="this.src='Twitterhov.png'" onmouseout="this.src='Twitter.png'" /></a></li>
            <li><a href:"mailto:gaaren03@gmail.com"><img class="mailto" src="Mailto.png" width="53px" height="50px" title="gaaren03@gmail.com" onclick="this.src='Mailtohov.png'" onmouseover="this.src='Mailtohov.png'" onmouseout="this.src='Mailto.png'" /></a></li>
            </ul>

        </div><!--ends undernavigation-->



li {
    margin:0 20px;
    font-size:18px;
    display:inline-block;
    text-align:center;
}

Answer 1

您可以将列表项设置为固定宽度，因为您将它们设置为显示：inline-block。或者，如果您支持IE8及更高版本，则可以将ul设置为：table，宽度为100％，li显示：table-cell。

Fiddle

ul {
    display:table;
    width: 100%;
}

li {
    padding: 10px;
    font-size:18px;
    display:table-cell;
    text-align:center;
}

希望这有帮助。

Answer 2

只需将text-align：center添加到ul即可。 :) codepen：http://codepen.io/anon/pen/xGgpLK

li {
  margin:0 20px;
  font-size:18px;
  display:inline-block;
}

ul {
  text-align: center;
}

完美中心li内联块元素？

2 个答案: