Sjors Luyckx Sjors Luyckx - 3 months ago 14
CSS Question

Center display-inblock

On (my site) I would like to place the menubar in the center of the page.
Here the code of my menubar:

#navigation {
padding-bottom: auto;
width: 960px;
margin: auto;
text-align: center;
text-transform: uppercase;
overflow: hidden;
font-family: 'Raleway', sans-serif;
font-size: 13px;
background-color: #DDDDDD;
border: 0px solid;
border-radius: 15px;
color: #000000;
display: inline-block;
}


Thanks in advance for helping me! :)

Answer

Add width: 100%; to your #navigation for a full-wdith centered menu.


Or change the display to block for a centered menu without a full-width background.


If you want to keep the yellow line under, add a 1px bottom margin. This will shift the rest one pixel lower and it will reveal a yellow line.

margin-bottom: 1px

Working JSFiddle for this: http://jsfiddle.net/qwnwkp7u/2/