我最近開始學習CSS，並且遇到了一些我無法弄清楚的東西。 http://jsfiddle.net/HDKsq/7/是我的小提琴。我試圖在我的導航欄中設置按鈕，使其在中間垂直對齊。按鈕是無序列表中的元素，我將它們設置爲vertical-align：middle;但按鈕頂部的空間明顯大於底部，我是否使用了錯誤的語法？垂直對齊：中間稍微偏離頂部

ul li{ 
list-style:none; 
display:table-cell; 
vertical-align: middle; 
border: 2px solid white; 
padding-right : 10px; 
padding-left: 10px; 
background-color:black; 
border-radius:6px; 
line-height:100%; 
text-align:center; 
width: 150px;

澄清這是我在問什麼 enter image description here

來源

2014-05-01 lonewaft

更改以下行：

padding: 10px 10px;

到

padding: 6px 10px 10px;

居中li S，你必須手動調整填充。這與你在家庭標誌上的圖片的高度有關。如果保持在30px，那麼您需要進行調整，因爲它會影響li的高度，其高度爲100％（表示文本將調整爲圖片的高度）。因此，根據所用圖片的大小，您需要指定padding-top，因爲圖片會向下流動（大於它應居中的大小）。

fiddle

請原諒我使用的佔位符小貓。我希望你不要爲喜悅而哭泣。

來源

2014-05-01 03:51:30 royhowie

謝謝！這固定它。還有一個問題，當CSS對齊圖片時，它是基於圖片中間還是圖片底部對齊？ – lonewaft

@lonewaft這個[website]（http://www.impressivewebs.com/css-vertical-align/）在'vertical-align'上有一個很好的寫法。請注意，「垂直對齊」僅適用於「內聯」或「塊」元素，因爲您已將它應用於鏈接，而不是圖像，它將基於該元素（鏈接）居中。由於圖像大於'父母'的'

...

'，它會向下溢出。 – royhowie

它在谷歌是完美的人，只是因爲小「G」你覺得它像它觸及到了底部邊框。

這是因爲'g'的字符形成，你會得到'q'的相同效果。

您的CSS非常完美。

來源

2014-05-01 03:48:03 user3591579

我希望哈哈，但我認爲我不清楚我談論的是哪個邊緣感到抱歉，現在在帖子中用一個圖像來澄清。 – lonewaft

垂直對齊：中間稍微偏離頂部

回答

fiddle

相關問題