html - How can I center my menu in the middle? -
i want display css horizontal menu in middle of header
element , make sure stays in middle when resizing browser window. of course tried margin: auto;
, did not work me.
jsfiddle code
header .center { background: url(../images/header-center.png) no-repeat; width: 510px; height: 100%; /*margin: auto;*/ }
beyond margin: 0 auto;
need change #navigation
removing position: absolute;
, left: 260px;
please notice giving bigger size menu #navigation
, smaller size header contains .center
class.
complete fix issue:
header .center { background: url("https://dl.dropbox.com/sh/1mp20mw7izrycq2/fubloqubn0/pingdom-theme/images/header-center.png") no-repeat; width: 510px; height: 100%; margin: 0 auto; } #navigation { width: 705px; height: 50px; overflow: visible; }
the reason code not working because doing margin: auto
should technically work because it's giving your: top, right, bottom , left sides margin of auto
, while fine, #navigation
still has position properties not letting center it.
so final lesson:
everytime declar margin
, padding
, border
etc... can 2 types of shorthand notation them take care of sides.
margin: 0 auto
means: margin top , bottom 0 , margin left , right auto.
Comments
Post a Comment