CSS導航菜單文本罕見的行爲對齊底部一些如何

http://richiesportfolio.com/temp-site-tester/index.html

正如你所看到的影像對準頂部導航菜單，但如果我在鏈接中放置文本，文本將變成導航菜單的高度並對齊底部。我不知道這是怎麼發生的。

這裏是一些CSS，其餘的你可以查看我給你的鏈接的頁面源。

body, html { background: #e6f3f7; text-align: center; height: 100%; font-face:Verdana, Geneva, sans-serif; } 

#page_wrapper { 
    background: url(images/bg_slice.jpg) repeat-x #e6f3f7; 
} 
.page { 
    margin:0 auto; 
    width: 1000px; 
    overflow: hidden; 
    padding-bottom: 35px; 
} 
#page { 
    background: url(images/header.jpg) no-repeat #e6f3f7; 
    overflow: hidden; 
} 

#nav { 
    height: 55px; 
    margin-top: 150px; 
    list-style: none; 
} 

#nav li{ 
    display: inline;  
} 

#nav li img { 
    margin:0 10px; 
} 

#nav li a { 
    font-size: 24px; 
    margin-left: 10px; 
    margin-right: 10px; 
    margin-top:0px; 
    color: #fff; 
} 

#nav li.current a { 

} 


#nav li a:hover { 

} 

span { 
    font-family: Myriad Pro; 
    font-weight: bold; 
    margin-top:0; 
} 

h1 { margin: 35px; 
    color:#022c4d; 
} 

p { margin-left:35px; 
    color:#6492a3;} 

#content { 
    margin: 150px auto; 
} 

#column1 { 
    float:left; 
    width:650px; 
    background: url(images/content_bg.png); 
    height:650px; 
    text-align:left; 


} 

#column2 { 
    float:left; 
    width:277px; 
    margin-left:50px; 


    }

來源

2011-07-05 RiCHiE

你可以從訓練頁面中看到，如果我刪除menu_divider.jpg圖像文本對齊再次向上頂。 – RiCHiE

感謝隊友，工作就像一個魅力！ – RiCHiE

I'ts的#nav li及其display: inline;

我建議你看看這..這是你的定心菜單的好辦法。（在大多數情況下。）

http://matthewjamestaylor.com/blog/beautiful-css-centered-menus-no-hacks-full-cross-browser-support

來源

2011-07-05 06:32:54 Joonas

感謝我現在看看，我早些時候嘗試使用另一種方法從內聯使用浮法：左，但無法讓它居中。 – RiCHiE

是的，這是我開始編碼html和css時碰到的第一件事情之一......使用Matthew Taylor顯示的方法非常簡單。前3個選擇器很重要。 – Joonas

CSS導航菜單文本罕見的行爲對齊底部一些如何

回答

相關問題