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

Popular posts from this blog

css - Which browser returns the correct result for getBoundingClientRect of an SVG element? -

gcc - Calling fftR4() in c from assembly -

.htaccess - Matching full URL in RewriteCond -