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?
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>
vertical-align
): #display img, #display span {vertical-align: middle;}'
And Enclose the text inside the <span>
tags.
Added a span
tag to the text.
<div id="display"><img src="http://i46.tinypic.com/2jd4due.gif" /> <span>SOME TEXT</span> </div>
Shift it using CSS position: relative;
#display span {
position: relative;
top: -3px;
}
#display span
selects a span
tag that's a child of an element id display
. Everything else is pretty self explanatory.
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>
because img
tag is inline-block
element
Live demo http://jsfiddle.net/4a9XX/8/
the vertical-align
attribute should be applied on inner elements instead of the container. You can put your text in a span
and apply vertical-align
on both span
and img
:
#display img, #display span {
vertical-align:middle;
}
Here's the fiddle .
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.