I have this css code here
.navigation{
width:100%;
background-color:#7a7a7a;
font-size:18px;
}
.navigation ul {
list-style-type: none;
margin: 0;
}
.navigation li {
float: left;
}
.navigation ul a {
color: #ffffff;
display: block;
padding: 0 65px 0 0;
text-decoration: none;
}
What I am trying to do is center my class navigation. I tried using text-align:center;
and vertical-align:middle;
but neither of them worked.
and here is the HTML Code
<div class="navigation">
<ul>
<li><a href="http://surfthecurve.ca/">home</a></li>
<li><a href="http://surfthecurve.ca/?page_id=7">about</a></li>
<li><a href="http://surfthecurve.ca/?page_id=9">tutors</a></li>
<li><a href="http://surfthecurve.ca/?page_id=11">students</a></li>
<li><a href="http://surfthecurve.ca/?page_id=13">contact us</a></li>
</ul>
</div><!--navigation-->
When I say its not working, I mean the text is aligned to the left.
This question is related to
css
text-alignment
text-align
I try to avoid floating elements unless the design really needs it. Because you have floated the <li>
they are out of normal flow.
If you add .navigation { text-align:center; }
and change .navigation li { float: left; }
to .navigation li { display: inline-block; }
then entire navigation will be centred.
One caveat to this approach is that display: inline-block;
is not supported in IE6 and needs a workaround to make it work in IE7.
You have to make the UL
inside the div
behave like a block. Try adding
.navigation ul {
display: inline-block;
}
Source: Stackoverflow.com