如何在DIV內垂直對齊文本和圖像？

Question

我試圖垂直居中圖像和文字。 這是我在一個wkring jsfiddle http://jsfiddle.net/4a9XX/中的代碼，因為你可以看到文字低於圖像我怎么能把它們帶到水平？

CSS

#display {
position:fixed !important;
bottom:0;
z-index:999;
background-color:#D41924;
width:100%;
padding:5px;
color:#FFF;
font-weight:bold;
vertical-align:middle;
}

HTML

<div id="display"><img src="http://i46.tinypic.com/2jd4due.gif" /> SOME TEXT </div>

Answer 1

使用此（ vertical-align ）：

​#display img, #display span {vertical-align: middle;}​'

並將文本包含在<span>標記內。

更新小提琴： http ： //jsfiddle.net/4a9XX/10/

Answer 2

http://jsfiddle.net/4a9XX/4/

在文本中添加了span標記。

<div id="display"><img src="http://i46.tinypic.com/2jd4due.gif" /> <span>SOME TEXT</span> </div>

使用CSS position: relative;移動它position: relative;

#display span {
   position: relative;
   top: -3px;    
}

#display span選擇一個span標簽，它是元素id display的子元素。 其他一切都非常自我解釋。

Answer 3

CSS

   #display {
position:fixed !important;
bottom:0;
z-index:999;
background-color:#D41924;
width:100%;
padding:5px;
color:#FFF;
font-weight:bold;
}

img{
vertical-align:top;
}
p{
display:inline-block;
    vertical-align:top;
}

HTML

<div id="display"><img src="http://i46.tinypic.com/2jd4due.gif" /> <p>SOME TEXT </p></div>

因為img 標簽是inline-block 元素

現場演示http://jsfiddle.net/4a9XX/8/

Answer 4

vertical-align屬性應該應用於內部元素而不是容器。 您可以將文本放在span並在span和img上應用vertical-align ：

​#display img, #display span {
    vertical-align:middle;
}​

這是小提琴 。