如何水平對齊導航並將其居中，使用響應式CSS優選

如何在導航菜單中水平居中導航？ CSS應該優先響應。如何水平對齊導航並將其居中，使用響應式CSS優選

HTML：

<nav id="centermenu"> 
    <ul> 
     <li><a href="#">Business</a></li> 
     <li><a href="#">Specialities</a></li> 
     <li><a href="#">Contact us</a></li> 
    </ul> 
</nav>

很好，CSS的是，改左：50％至25％，虛無縹緲。希望這是足夠

#centermenu { 
float: left; 
width: 100%; 
text-align: center; 
border-bottom: 2px solid #011; 
background: #ffe; 
overflow: hidden; 
position: relative; 
} 

#centermenu ul { 
float: left; 
clear: left; 
position: relative; 
list-style: none; 
left: 50%; 
display: block; 
text-align: center; 
} 


#centermenu ul li { 
display: inline; 
text-align: center; 
margin: 1em; 
padding: 1em; 
}

來源

2012-02-12 Linards Berzins

你有沒有嘗試文字對齊：居中centermenu？這是基本的，但你從來沒有指出你已經嘗試過 – OnResolve 2012-02-12 20:44:03

菜單項應該在一行嗎？或者保留他們的'display：list-item'狀態？ – 2012-02-12 20:44:22

剛剛添加了CSS。 – 2012-02-12 20:50:30

確保您的瀏覽器不怪癖模式渲染。你應該對HTML文件的第一行中指定一個DOCTYPE在標準模式來呈現：

<!DOCTYPE html>

在標準模式下，該作品（測試和工作對我來說）：

#centermenu { 
width: 100%; 
text-align: center; 
border-bottom: 2px solid #011; 
background: #ffe; 
overflow: hidden; 
position: relative; 
} 

#centermenu ul { 
list-style: none; 
display: block; 
margin: 0 auto; 
text-align: center; 
} 


#centermenu ul li { 
display: inline; 
text-align: center; 
margin: 1em; 
padding: 1em; 
}

來源

2012-02-12 22:12:30 Substantial

感謝，我在使用HTML5，正如你注意到的，在Chrome中，懷疑是這種情況。謝謝你的努力 – 2012-02-12 22:36:10

修改了我的答案。我也在使用Chrome。對我來說很好。也許檢查級聯樣式。 – Substantial 2012-02-12 23:10:17

這個作品就像一個魅力，接受它應該是 – qwertzman 2013-06-02 14:20:34

ul { 
    display: block; 
    margin: 0 auto; 
}

來源

2012-02-12 20:45:14

嘗試過，沒有工作 – 2012-02-12 21:00:46

ü需要指定UL寬度，如果使用保證金：0汽車;不需要浮動：左邊;或離開：50％

#centermenu ul { 
margin: 2 auto; 
display: block; 
width: 600px; 
}

或使ul顯示內聯;

#centermenu ul { 
display: inline; 
}

來源

2012-02-12 21:04:32

嘗試了兩種方法，都沒有工作，雖然 – 2012-02-12 21:25:34

#centermenu { 
    display:block; 
    width:100%; 
    text-align:center; 
} 

#centermenu > ul { 
    display:inline-block; 
    text-align:left; 
    overflow:auto; 
} 

#centermenu > ul > li { 
    float:left; 
}

來源

2012-02-13 02:41:51 zellio

這似乎是一個很好的做法，以後再檢查。謝謝 – 2012-02-13 14:53:21

如何水平對齊導航並將其居中，使用響應式CSS優選

回答

相關問題