CODEWITHSUNDEEP
htmlcss
Daniel
Daniel

Reputation: 4342

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?

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>

Upvotes: 1

Views: 286

Answers (4)

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167182

Use this (vertical-align):

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

And Enclose the text inside the <span> tags.

Updated Fiddle: http://jsfiddle.net/4a9XX/10/

Upvotes: 4

Rohit Azad Malik
Rohit Azad Malik

Reputation: 32182

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/

Upvotes: 0

rhgb
rhgb

Reputation: 4205

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.

Upvotes: 0

Raekye
Raekye

Reputation: 5131

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

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.

Upvotes: 0

Related Questions