Question

我想将中心设置为.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;
}

Answer 1

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

.user-menu {
    margin-left:auto;
    margin-right:auto;
    width: 100px;
}

Answer 2

制作本

http://jsfiddle.net/2VMrf/

CSS

.user-menu {
    margin-left:auto;
    margin-right:auto;
   width:50%;
}

Answer 3

试试这个

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

参考 FIDDLE 你需要逐个显示

 .user-menu {  
      margin : 0 auto;
    width:100px;
    clear:both;   
    }

Answer 4

使用此类而不是.user-menu类

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

或者只是在.user-menu类中添加Width。这将为你做到这一点。

的jsfiddle： Working Sample.. Click Here

Answer 5

为此你需要给出一个标签的宽度

.user-menu {
    margin-left: auto;
    margin-right: auto;
    width: 100px;
}

设置中心位置的margin-left和margin-right

HTML

CSS

5 个答案: