Question

我在HTML5中有2个项目，我正在尝试集中（水平）对齐它们。但是保证金：0自动;不工作，我还能想到别的吗？

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/

Answer 2

添加到您的样式表：

.topUl { text-align: center; }

Answer 3

为UL标记添加一个css规则

.topUL{display:block;text-align:center;}

参见演示http://jsfiddle.net/2w34K/1/

无序列表项目未在中心正确对齐？

3 个答案: