爲什麼下面的元素顯示在div的底部邊緣？

HTML：爲什麼下面的元素顯示在div的底部邊緣？

<div id="header"> 
     <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150"> 
     <a href="1.html">blah</a> 
     <a href="2.html">blah</a> 
     <a href="3.html">blah</a> 
</div>

的圖像是一個標誌的佔位符。

CSS：

body { 
    margin: 0; 
    padding: 0; 
    font-family: "Century Gothic", Tahoma, Arial; 
} 

#header img { 
    margin-right: 130px; 
} 

#header a { 
    text-decoration: none; 
    margin-right: 60px; 
    color: #000000; 
}

從本質上講，我希望標籤的「嗒嗒」是在圖像的垂直中心。我已經嘗試在「#header a」選擇器中添加底部和頂部填充和邊距，但它不起作用。標籤繼續與圖片的底部邊緣對齊。

來源

2016-08-12 ajf1000

你想讓'a'標籤位於中心的圖像上嗎？ –

嘗試添加一個行高：## px;到一個標籤。 –

從您的問題中很難分辨出來，但也許您正在尋找verical-align屬性？嘗試在'img'設置'vertical-align：middle'' – peterjb

試試這個CSS，我認爲這是可以對你有所幫助，看看Fiddle Demo

CSS：

body { 
    margin: 0; 
    padding: 0; 
    font-family: "Century Gothic", Tahoma, Arial; 
} 

#header img { 
    float: left; 
    margin-right: 60px; 
} 

#header a { 
    color: #000000; 
    float: left; 
    margin-right: 40px; 
    padding: 9% 0; 
    text-decoration: none; 
}

來源

2016-08-12 05:00:47 Jainam

如果您想將圖像作爲div的背景，您可以使用圖像設置背景。

#header{ 
     background-image: url("https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150"); 
     text-align:center; 
    }

來源

2016-08-12 04:55:57

添加這個屬性，你的CSS選擇器 - #header img

display: inline-block; 
vertical-align: middle;

我爲你創作了一個小提琴。你可以檢查一下嗎？希望這可以幫助。

https://jsfiddle.net/uh4hs4ze/

來源

2016-08-12 05:03:56

爲什麼下面的元素顯示在div的底部邊緣？

回答

相關問題