Question

我无法将菜单放在页面中央，我已插入所有“margin：0 auto;”我可以和所有“text-align：center”，div与所有东西分开，不是别的东西...... 这是css代码：

.more{
margin: 0 auto;
position:relative;
clear:both;
font-size: 13px;
padding: 20px 0px;
text-transform: uppercase;
width: 40%;
height: 20%;
}
.more ul{
display:block;
text-align:center;
}
.more ul li{
display: block;
padding: 10px 3px;
float:left;
}
.more ul li.selected a,
.more ul li.selected a:hover{
background:#0099c5;
color:#fff;
text-shadow:none;
font-weight:bold;
}
.more ul li a{
color:#555;
float:left;
background:#fff;
width: 100%;
padding: 8px 10px;
-moz-box-shadow:1px 1px 2px #aaa;
-webkit-box-shadow:1px 1px 2px #aaa;
box-shadow:1px 1px 2px #aaa;
}
.more ul li a:hover{
background:#000;
color:#fff;
}

这是HTML代码：

             <div class="more">
                <ul>
                    <li class="selected"><a href="#">Homepage Blog</a></li>
                    <li><a href="#1">Cerca</a></li>
                    <li><a href="#2">Archivio</a></li>
                    <li><a href="#3">Tags</a></li>
                </ul>
            </div>

如何将div永久地放在我页面的中心？我已经尝试了很多很多可能的动作。

谢谢。

P.S。我也尝试过<div align=center> ...my menu (class=more) list ...</div>

Answer 1

请记住，你不能在浮动元素上使用margin：0 auto。

保证金0自动的键是：

1）元素必须有display：block 2）没有浮动，绝对或固定位置

.more{
float:left;
clear:both;
font-size: 13px;
padding: 20px 0px;
text-transform: uppercase;
width: 100%;
height: 20%;
}
.more ul{
display:block;
text-align:center;
margin:0 auto;
}
.more ul li{
display: inline-block;
padding: 10px 3px;
}
.more ul li.selected a,
.more ul li.selected a:hover{
background:#0099c5;
color:#fff;
text-shadow:none;
font-weight:bold;
}
.more ul li a{
color:#555;
background:#fff;
width: 100%;
padding: 8px 10px;
-moz-box-shadow:1px 1px 2px #aaa;
-webkit-box-shadow:1px 1px 2px #aaa;
box-shadow:1px 1px 2px #aaa;
}
.more ul li a:hover{
background:#000;
color:#fff;
}

css3，不能把div集中

1 个答案: