1

我正在尝试将图像和文本垂直居中。这是我在 wokring 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>
4

4 回答 4

4

使用这个 ( vertical-align)：

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

并将文本包含在<span>标签内。

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

于 2012-07-06T05:47:42.013 回答
0

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;

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

#display span选择一个span元素 id 的子标签display。其他一切都是不言自明的。

于 2012-07-06T05:48:31.947 回答
0

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/

于 2012-07-06T05:50:19.547 回答
0

该vertical-align属性应应用于内部元素而不是容器。您可以将文本放入 a并同时span应用于and ：vertical-alignspanimg

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

这是小提琴。

于 2012-07-06T05:50:51.333 回答