css - 无序列表元素未正确居中对齐？

Question

我在 HTML5 中有 2 个元素，我正在尝试将它们居中(水平)对齐。然而 margin: 0 auto;不工作，我也能想到别的吗？

HTML5代码

<section class="fourth">  

<div id="Top"> Top </div>


    <ul class="topUL" > 


    <li class="topthings"> List 1 </li>
    <li class="topthings"> List 2 </li>

</ul>

CSS

因为我尝试过的方法没有用，所以我从代码中删除了它们，这实际上是一个简单的 CSS 代码。

.fourth {
height: 35em;
width: 100%;

/** STYLE **/
background-color: #0099FF;
}

#Top {

height:auto;
width:inherit;
text-align:center;

/** FONT STYLE **/

font-family: 'Wire One', Gadget, sans-serif;
color: White;
font-size: 150px;
}

.topthings {

display: inline-block;
margin: auto;

/**FONT STYLE**/
font-family: 'Tulpen One', Gadget, sans-serif;
color: White;
font-size: 75px;
}

链接到它现在的样子。

https://drive.google.com/file/d/0B27I0PqG2ru9eTByOTJsbTd2c1U/edit?usp=sharing

我希望“List 1”和“List 2”在“Top”一词下同等对齐

Answer 1

没有足够的代表发表评论，但您是否尝试过简单地将 text-align: center 添加到 .fourth 类？

.fourth {
height: 35em;
width: 100%;
text-align: center;

http://jsfiddle.net/W92Q5/