8

我想将中心设置为.user-menu位置，但我下面的代码不起作用。我该如何解决这个问题？

HTML

<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>

CSS

* {
    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;
}
4

5 回答 5

7

给.user-menu一个宽度，目前它是一个块元素，所以它会填满它的容器。这会导致user-menu整个页面扩展到 100% 宽度，从技术上讲，它是居中的，您只是没有注意到它。

.user-menu {
    margin-left:auto;
    margin-right:auto;
    width: 100px;
}
于 2013-08-07T09:46:14.317 回答
3

做这个

http://jsfiddle.net/2VMrf/

CSS

.user-menu {
    margin-left:auto;
    margin-right:auto;
   width:50%;
}
于 2013-08-07T09:49:48.643 回答
2

尝试这个

 .user-menu {  
  margin : 0 auto;
width:50%;
clear:both;   
}

参考这个FIDDLE 你需要一一显示

 .user-menu {  
      margin : 0 auto;
    width:100px;
    clear:both;   
    }
于 2013-08-07T10:04:20.633 回答
2

使用这个类而不是你的 .user-menu 类

.user-menu {
    margin:0 auto;
    width:300px;
}

或者只是将 Width 添加到您的 .user-menu 类。这将为您解决问题。

JSFiddle： 工作示例.. 单击此处

于 2013-08-07T10:09:14.417 回答
-1

为此，您需要提供标签的宽度

.user-menu {
    margin-left: auto;
    margin-right: auto;
    width: 100px;
}
于 2013-08-07T09:55:15.917 回答