居中的水平導航欄CSS
[英]centered horizontal navigation bar css
問題描述
我知道這個主題有很多答案，但是對於我的代碼還是不起作用。 每次我嘗試使用文本對齊中心將文本居中時，除非我刪除float：left，display：inline或display：inline-block，否則它將不起作用。 但是然后我有一個垂直居中的導航欄...
誰能幫我這個？
這是我的HTML代碼：
<div class="nav">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="workshop.html">Moviekids festivals</a></li>
</ul>
</div>
這是CSS代碼：
*{
margin: 0px;
padding: 0px;
}
body {
text-align: center;
font-family: arial;
background-color: white;
}
#wrapper{
width: 960px;
margin: 0 auto;
height: 100%;
text-align: left;
background-color: #1d1d1b;
}
.nav {
background-image:url("img/nav.jpg");
width: 100%;
height: 50px;
display: inline-block;
}
.nav ul {
list-style-type: none;
}
.nav li {
display: inline;
text-align: center;
}
.nav a {
text-decoration: none;
display: inline-block;
color: #1d1d1b;
padding: 10px;
}
3 個解決方案
解決方案1
2 已采納 2014-08-11 13:16:09
您需要像這樣在父元素上設置text-align：
.nav ul {
list-style-type: none;
text-align: center;
}
.nav li {
display: inline-block;
}
解決方案2
0 2014-08-11 13:20:11
我剛剛編輯了您的CSS以實現您的需求
.nav ul {
list-style-type: none;
text-align:center;
}
.nav li {
display:inline-block;
text-align: center;
padding: 10px;
}
.nav a {
text-decoration: none;
display: block;
color: #1d1d1b;
}
始終避免使用正文文本對齊，而應嘗試使用而不是包裝器。
解決方案3
-1 2014-08-11 13:21:47
確保您在HTML代碼的頂部提到了<!DOCTYPE html> 。 否則，您的代碼似乎很完美。
CSS導航欄UL未居中
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.