html - margin-left and margin-right for Setting Center position -
i want set center .user-menu
position, code below isn't working. how can solve this?
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; }
give .user-menu
width, block element fill container. causes user-menu
expand 100% width across page, technically centered, don't notice it.
.user-menu { margin-left:auto; margin-right:auto; width: 100px; }
Comments
Post a Comment