html - 在页面上居中标题时遇到问题

Question

我的网站上有一些页面标题，但它们似乎经常稍微偏离中心，我似乎无法轻松地将它们居中。

正如您在 Logo 上方的小半圆中看到的那样，“关于我”标题并未完全位于页面中央。

如果有人能帮助我将这些标题放在页面中间，我将不胜感激。

当前的 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;
}

当前的 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>

Answer 1

发生这种情况的原因是因为您的 spans 都是不同的 widths，因为它们的 widths 是由多长时间设置的a 标签内的文本是。例如，“portfolio”比“contact”稍长，因此它稍微抵消了“about me”。

通过设置 a 和 display: inline-block 让你的 a 标签都具有相同的 width 并给出它是一个 width，比如 width: 100px，或者任何看起来最适合你的东西。

示例:http://jsfiddle.net/8mT3g/