文字不在DIV內垂直對齊

我無法弄清楚爲什麼瀏覽器不允許我在DIV上設置頁邊空白或頂部填充以讓文本居中。文字不在DIV內垂直對齊

HTML -

<div id="header">   
    <div id="Nav"> 
     <div id="navright"> 
      <a href="#">Home</a> 
      <a href="#">About Us</a> 
       <a href="#">Contact Us</a> 
      <a href="#">Find Us</a> 
     </div> 
    </div> 
</div>

CSS -

#nav { 
    width: auto; 
    position: relative; 
} 

#nav a { 
    margin-left: 5px; 
    margin-right: 5px; 
    text-decoration: none; 
    font-family: "Arial"; 
    font-size: 14pt; 
    color: #ffffff; 
    position: relative; 
    margin-top: 10px; 
}

結果 -

Screenshot of the misaligned text within a DIV

任何想法，我要去的地方錯了嗎？由於

來源

2013-09-23 dynamicuser

添加'顯示：block'到'#nav一個{' – Morpheus

您發佈（圖像）的結果是不一樣的，實際上是由你的代碼生成的一個。而CSS選擇器區分大小寫，所以'＃nav'不等於'＃Nav'。 –

另外，使用保證金時請注意保證金摺疊。 – Passerby

你正在編寫導航NOG導航

HTML代碼應該是：

<div id="nav">不<div id="Nav">

這就是爲什麼你的CSS不會對div

工作環境和使用line-height爲您的a

#nav a { 
    line-height: (pixel height of the li or nav); 
}

工作JsFiddle這裏

來源

2013-09-23 11:00:05

添加display: inline-block;到您的標籤

demo

，顯然糾正你的錯字以資產淨值。

來源

2013-09-23 11:00:57

嘗試添加display:inline-block;你鏈接

#nav a { 
    ... 
    display:inline-block; 
}

，並重新命名<div id="Nav">到<div id="nav">

來源

2013-09-23 11:03:08 pbaris

#nav a { 
    text-decoration: none; 
    font-family: "Arial"; 
    font-size: 14pt; 
    color: #ffffff; 
    position: relative; 
    height:25px; 
    line-height:25px; 
    margin:5px; 
    display:inline-block; 
}

來源

2013-09-23 11:04:28

如果你想在margin-top出現你就必須申報display: inline-block爲<a>元素，有人已經指出。如果你想讓文本垂直居中，你也可以使用類似line-height: 50px;的東西。
這是a fiddle to play with。
當然，你應該修正你的CSS選擇器的拼寫錯誤或者多個用戶提到的HTML id屬性。

來源

2013-09-23 11:06:30

添加

display:inline-block

在#nav a

來源

2013-09-23 11:18:22

只需添加line-height爲您導航<div>

的高度一樣，並且糾正錯字錯誤。

如：

#nav {height:20px; float:left;} 
#nav a {line-height:20px;}

來源

2013-09-23 11:53:15 Vignesh

文字不在DIV內垂直對齊

回答

相關問題