I have some page headings on my website but they seem to often become slightly off centre and I don't seem to be able to easily centre them.
As you can see by looking at the small semi-circle above in the logo, the ABOUT ME heading is not completely in the centre of the page.
I would very much appreciate it if anyone could assist me with putting these headers in the middle of the page.
Current CSS
#navigationBar
{
width:75%;
height:35px;
margin:10px auto;
padding: 0 5px;
border:0px solid #1e1e1e;
background-color: #f3f3f3;
}
#nav
{
width: 100%;
float: left;
margin: auto;
margin-top:8px;
padding: 0;
background-color: #f3f3f3;
text-align: center;
color:#1e1e1e;
font-family:gobold;
text-align:center;
font-style:none;
font-weight: 100
}
#nav span a
{
padding-right:5%;
padding-left:5%;
text-decoration:none;
font-weight:bold;
color:#1e1e1e;
}
#nav span a:hover
{
color:#d21a20;
}
Current HTML
<div id="navigationBar">
<div id="nav">
<span><a href="portfolio.html">portfolio</a></span>
<span><a href="about.html">about me</a></span>
<span><a href="contact.html">contact</a></span>
</div>
</div>
The reason that this is happening, is because your spans
are all different widths
, because their widths
are being set by how long the text inside the a
tags are. For example, "portfolio" is a little longer than "contact", so it's offsetting "about me" just a little bit.
Make your a
tags all the same width
by setting a
with display: inline-block
and give it a width
like width: 100px
, or whatever looks best for you.
Example: http://jsfiddle.net/8mT3g/
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.