如何在DIV中集中超鏈接？

我有一組超鏈接（使用一個標籤）放置在一個DIV中，我希望他們在該DIV中居中。我曾嘗試在這個DIV上放置文本對齊（斜體），並且還嘗試了超鏈接的margin 0 auto（斜體），但它們仍然堅守在左邊。如何在DIV中集中超鏈接？

以下是HTML和CSS代碼。

感謝您的幫助！

HTML

<div id="navigation"> 
     <a class="nav" href="index.html">Home</a> 
     <a class="nav" href="Page 1.html">Page 1</a> 
     <a class="nav" href="Page 2.html">Page 2</a> 
     <a class="nav" href="Page 3.html">Page 3</a> 
     <a class="nav" href="Page 4.html">Page 4</a> 
</div>

CSS

#navigation { 
width: 100%; 
height: 40px; 
border: #000 solid 1px; 
    *text-align: center;* 
} 

.nav { 
text-align: center; 
text-decoration: none; 
display: block; 
float: left; 
width: 80px; 
height: 40px; 
background-color: #0F0; 
    *margin: 0 auto;* 
}

來源

2014-02-16 Tom

像這樣：http://jsfiddle.net/e6rgb/？ – drip

@drip完全像這樣，除非當我這樣做（或複製到Dreamweaver的編碼，超鏈接的高度和寬度屬性似乎被忽略。 – Tom

刪除浮動和更改塊內聯。這更像是你需要？編輯：對不起，只是意識到這是在jsfiddle。 – elk

從.nav類刪除float:left，並添加display:inline-block

.nav { 
text-align: center; 
text-decoration: none; 
display: inline-block; 
width: 80px; 
height: 40px; 
background-color: #0F0; 
}

Js Fiddle Demo

來源

2014-02-16 21:23:10 Sachin

這不起作用，因爲鏈接然後顯示爲堆疊元素，可以通過將顯示更改爲內嵌塊來改進，但高度然後寬度值被忽略。 – Tom

@Tom我已經在使用'display：inl ine-block「，並忽略高度和寬度值。我可以看到高度和寬度的變化。 – Sachin

嗯是的，我現在看到了這一點，但它似乎是Dreamweaver設計視圖與代碼相反的問題。無論如何感謝 – Tom

刪除Float：left fromy我們的a（.nav）並添加Text-align：center到你的div。

來源

2014-02-16 21:24:38

取出浮子。

浮動元素不能使用margin: 0 auto;居中。將float添加到元素使其成爲塊元素。 text-align: center不影響塊元素。它確實會影響內聯塊。

來源

2014-02-16 21:27:26 donleche

有很多方法可以達到這個目標，但我認爲你應該閱讀約書亞約翰遜的post在設計小屋，以便你將學到更多關於how to center anything的知識。

來源

2014-02-16 21:43:51 Cizaphil

如何在DIV中集中超鏈接？

回答

相關問題