Search code examples
htmlcssmenublockcenter

Centering a block element in Css, with laying next to each other without any huge space

i want to center my block menu in the middle, but i also want it to lay next to each other without any huge space. i tried to float the entire thing and set the margin left and margin right to auto. But after searching the web, i found out that is not possible to center something that is floating.

Then i tried to set the block to inline-block and take away the float element. And again settiing the margin to auto. Now this dosen't seem to work either. I read someplace that you could set the text-align to center, this is centering my text in the block, but the block itself isn't getting in the middle.

my entire menu code in css at this moment:

a.menyStil
{
display: inline-block; 
width:150px; 
height:25px;
margin-right:auto;
margin-left:auto;
background:#dca; border:1px solid #000;
text-align:center; 
text-decoration:none; font-family:verdana, arial, sans-serif; font-size:12px; color:#000;
line-height:25px; 
overflow:hidden;
}

a.menyStil:hover {background:#764;}
a.menyStil:active {background:#c00;}

and relevant html code:

<p> <a class="menyStil" href="Hjem.html"> Hjem</a>
<a class="menyStil" href="Kontakt.html"> Kontakt oss</a>
<a class="menyStil" href="om_oss.html"> om osst</a>
<a class="menyStil" href="testing.html"> Testing</a></p>

i would really appreciate help :)

Solution

  • Add this in your css code

    p{
 width: 650px;
margin: auto;
}

    Demo: fiddle

    you should add margin auto in p. Because its containg the a. so its come center.
    I hope this may be helpful to you.