[英]Having trouble centering headings on page
我的網站上有一些頁面標題,但它們似乎經常偏離中心,而且我似乎無法輕松地將它們居中。
通過查看徽標上方的小半圓可以看到,“關於我”標題並不完全在頁面中心。
如果有人可以協助我將這些標題放在頁面中間,我將非常感激。
當前的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>
發生這種情況的原因是,您的spans
都是不同的widths
,因為它們的widths
是由a
標簽內的文本的長度設置的。 例如,“作品集”比“聯系人”要長一些,因此它僅使“關於我”偏移了一點。
讓你的a
標簽都是一樣的width
設定a
與display: inline-block
,並給它一個width
像width: 100px
,或任何尋找最適合你的。
示例: http : //jsfiddle.net/8mT3g/
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.