All geek questions in one place

Margin-left and margin-right to adjust the center position

I want to set the center to .user-menu , but my code below does not work. How can i 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; }
+6
source share
5 answers

Give the width .user-menu a, it is currently a block element so that it fills its container. This will cause the user-menu to expand to 100% of the width on the page, which is technically centered, you just don’t notice it.

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

do it

http://jsfiddle.net/2VMrf/

CSS

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

try it

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

send this FIDDLE you need to display one by one

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

Use this class instead of the .user-menu class

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

Or just add Width to your .user-menu class. This will do the trick for you.

JSFiddle: Working example. Press here

+1
source

To do this, you need to specify the width of the tag

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

Source: https://habr.com/ru/post/951206/

More articles:


All Articles