導航:首頁 > 萬維百科 > 網頁設計中如何使導航條居中

網頁設計中如何使導航條居中

發布時間:2020-09-03 09:14:35

1、怎麼用CSS把網頁導航條文字居中?

將導航鏈接設置行高 line-height屬性,屬性值等於外面大盒子的高度即可!

希望能幫到你!

2、怎麼實現在頁面中導航欄居中的效果?

首先把#menu li 裡面的浮動屬性改為:display:inline;
然後在#menu 裡面的加上:text-align:center; line-height:35px;

先試試吧,有什麼問題就提提吧。

3、如何讓導航條層居中

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>紡織科技協會</title> 
</head> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>www.52css.com</title> 
<style type="text/css"> 
<!-- 
#nav { 
width:90%; 
height:30px; 
background-color: #99CCCC; 
text-align:center; 

#nav_main{/*增加的一個選擇器*/ 
margin:0 auto; 
width:640px;/*下面的#nav li 中width*個數即80*8=640*/ 

#nav ul { 
font-size: 12px; 
color: #FFF; 
line-height: 30px; 
white-space: nowrap; 
margin:0px; 

#nav li { 
list-style-type: none; 
float:left;/*我改了,這個在導航條中很經常使用*/ 
width:80px;/*我改了*/ 
padding:0px; 
margin:0px; 

#nav li a { 
display:block;/*我改了*/ 
width:80px;/*我改了*/ 
text-decoration: none; 
font-family: Arial, Helvetica, sans-serif; 
padding:0px; 
color: #FFF; 

#nav li a:hover { 
color:#000033; 
background-color: #FFFFCC ; 
height:30px; 

.STYLE1 { 
font-size: 24px; 
font-weight: bold; 

.STYLE3 { 
color: #000033; 
font-size: 18px; 

.STYLE4 { 
font-size: 16px; 
font-weight: bold; 
color: #333366; 

.STYLE6 {font-size: 18px} 
.STYLE7 { 
font-size: 16px; 
font-weight: bold; 
color: #003366; 

.STYLE9 {font-size: 12px} 
.STYLE10 {font-size: 12} 
.clear{ 
clear:both; 

--> 
</style> 
</head> 
<body> 
<div id="nav"> 
<div id="nav_main"> 
<ul> 
<li><a href="http://www.52css.com/">業界動態</a></li> 
<li><a href="http://www.52css.com/">最新活動</a></li> 
<li><a href="http://www.52css.com/">下載專區</a></li> 
<li><a href="http://www.52css.com/">相關知識 </a></li> 
<li><a href="http://www.52css.com/">歷史回顧</a></li> 
<li><a href="http://www.52css.com/">聯系我們</a></li> 
<li><a href="http://www.52css.com/">關於我們</a></li> 
<li><a href="http://www.52css.com/">TS論壇</a></li> 
</ul> 
</div> 
</div> 
</body> 
</html>

4、網頁製作,如何把頁面內容排版居中,內容文字對齊導航欄

文字用一個div嵌套起來,width設置呢跟導航一樣,設置居中的css加這句height:auto 0;

5、網頁設計怎樣使橫向導航欄文字居中

沒有居中可能是因為你把a標簽放到盒子里了(應該是div或者li吧),然後沒有給出盒子的寬度,於是寬度自適應為文字寬度加padding,所以textalign沒效果。吧寬度改下在看看吧,希望對你有幫助

6、在CSS樣式中如何使導航文本居中?

你的意思就是說要讓nav這個層,在網頁中是居中的對吧,我看了一個你這里nav用了絕對定位,如果你還想讓其居中的話,我建議可以在它的外層在加一個div,這個div來控制居中,用margin:auto就可以了,但此時的nav就是相對於你新加的div而絕對定位了。所以要搞清楚這些個關系就好辦了。希望你能明白我的意思。

7、怎麼才能使網頁中的導航欄居中

<div style="WIDTH: 100%; ALIGN:CENTER; ">你的導航欄html代碼</div>

8、如何讓設置好的導航條在網頁上居中

在導航欄容器中加入 style=「margin:0 auto」
如<div style=「margin:0 auto」>導航欄內容</div>

9、用Dreamweaver設計導航條如何居中及相關問題

div如果用了id 那個居中屬性是無效的。 建議這樣用<div align="center"><div id="nav"></div></div>

10、DIV+CSS設計網頁布局時,如何將菜單導航部分背景自適應屏幕寬度,而讓導航內容居中?

這是由兩個div來實現的,首先建立一個外層div並設置寬高,要使寬度隨屏幕寬度變化(即瀏覽器寬度變化),那麼寬度就得設置100%,高度設置為你需要的高度即可,具體屬性為 width:100%;height:你自己的高度;background:你需要的顏色; 這樣就讓該div隨屏幕(瀏覽器)寬度變化而變化了。然後在這個div裡面再嵌套一個div給定一個寬高屬性,就是你導航的寬高,要使之居中,各人使用的方法也有所不同,但是常用的還是margin屬性,具體屬性如下 width:你導航的寬度;height:你導航的高度;margin:0 auto; 這樣就實現了,如果背景是圖片的話就更改background屬性即可,還有不明白的隨時Hi我。

與網頁設計中如何使導航條居中相關的知識