我想将中心设置为.user-menu位置,但下面的代码不起作用.我怎么解决这个问题？
<body>
<div class="user-menu">
<div class="menu-items">
<div class="bought-tickects centered hover-effect"></div>
<label>??????? ????</label>
</div>
<div class="menu-items">
<div class="profile centered hover-effect"></div>
<label>???? ??????</label>
</div>
<div class=""></div>
</div>
<div class="clear"></div>
<div class="container-of-selected">
</div>
</body>
* {
margin: 0px;
padding: 0px;
font-family: Tahoma;
}
.centered {
margin-left: auto;
margin-right: auto;
}
.menu-items {
float: left;
height: 90px;
margin-left: 10px;
margin-right: 10px;
}
.profile {
width: 72px;
height: 72px;
padding-left: 10px;
padding-right: 10px;
background-repeat: no-repeat;
background-position: center;
background-image: url('Images/folder-contacts-icon.png');
border-radius: 5px;
}
.bought-tickects {
width: 72px;
height: 72px;
padding-left: 10px;
padding-right: 10px;
background-repeat: no-repeat;
background-position: center;
background-image: url('Images/tickets-icon.png');
border-radius: 5px;
}
.clear {
clear:both;
}
.user-menu {
margin-left:auto;
margin-right:auto;
}
给出.user-menu一个宽度,目前它是一个块元素,因此它将填充其容器.这会导致在user-menu整个页面上扩展到100%宽度,从技术上讲,它是居中的,您只是没有注意到它.
.user-menu {
margin-left:auto;
margin-right:auto;
width: 100px;
}
做这个
CSS
.user-menu {
margin-left:auto;
margin-right:auto;
width:50%;
}