[英]How do I align text and an image vertically inside a DIV?
I am trying to vertically center an image and text. 我试图垂直居中图像和文字。 Here is the code I have in a wokring jsfiddle http://jsfiddle.net/4a9XX/ as you can see the text is lower than the image how can I bring them to be level?
这是我在一个wkring jsfiddle http://jsfiddle.net/4a9XX/中的代码,因为你可以看到文字低于图像我怎么能把它们带到水平?
CSS 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 HTML
<div id="display"><img src="http://i46.tinypic.com/2jd4due.gif" /> SOME TEXT </div>
vertical-align
): vertical-align
): #display img, #display span {vertical-align: middle;}'
And Enclose the text inside the <span>
tags. 并将文本包含在
<span>
标记内。
http://jsfiddle.net/4a9XX/4/ http://jsfiddle.net/4a9XX/4/
Added a span
tag to the text. 在文本中添加了
span
标记。
<div id="display"><img src="http://i46.tinypic.com/2jd4due.gif" /> <span>SOME TEXT</span> </div>
Shift it using CSS position: relative;
使用CSS
position: relative;
移动它position: relative;
#display span {
position: relative;
top: -3px;
}
#display span
selects a span
tag that's a child of an element id display
. #display span
选择一个span
标签,它是元素id display
的子元素。 Everything else is pretty self explanatory. 其他一切都非常自我解释。
Css 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 HTML
<div id="display"><img src="http://i46.tinypic.com/2jd4due.gif" /> <p>SOME TEXT </p></div>
because img
tag is inline-block
element 因为
img
标签是inline-block
元素
Live demo http://jsfiddle.net/4a9XX/8/ 现场演示http://jsfiddle.net/4a9XX/8/
the vertical-align
attribute should be applied on inner elements instead of the container. vertical-align
属性应该应用于内部元素而不是容器。 You can put your text in a span
and apply vertical-align
on both span
and img
: 您可以将文本放在
span
并在span
和img
上应用vertical-align
:
#display img, #display span {
vertical-align:middle;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.