Geek asks and answers

How to center hyperlinks in a DIV?

I have a set of hyperlinks (using a tag) that fit in a DIV, and I would like them to be centered inside that DIV. I tried putting text-align (italics) on this DIV, and also tried margin 0 auto (italics) for hyperlinks, but they still hold tight to the left.

Below is the HTML and CSS code.

Thanks for the help!

HTML

<div id="navigation">
        <a class="nav" href="index.html">Home</a>
        <a class="nav" href="Page 1.html">Page 1</a>
        <a class="nav" href="Page 2.html">Page 2</a>
        <a class="nav" href="Page 3.html">Page 3</a>
        <a class="nav" href="Page 4.html">Page 4</a>
</div>

CSS

#navigation {
width: 100%;
height: 40px;
border: #000 solid 1px;
    *text-align: center;*
}

.nav {
text-align: center;
text-decoration: none;
display: block;
float: left;
width: 80px;
height: 40px;
background-color: #0F0; 
    *margin: 0 auto;*
}
+3
source share
4 answers

Remove float:leftfrom class .navand adddisplay:inline-block

.nav {
text-align: center;
text-decoration: none;
display: inline-block;
width: 80px;
height: 40px;
background-color: #0F0; 
}

Js fiddle demo

+3
source

Remove the float.

margin: 0 auto;. float . text-align: center . , .

+2

Remove Float: left fromy our a (.nav) and add Text-align: center to your div.

+1
source

There are so many ways to achieve this, but I think you should read this post from Joshua Johnson in the designer hut so that you learn more about how to center something .

0
source

More articles:


All Articles