How can I vertically align text inside the div
with the image
?
Fiddle: http://jsfiddle.net/C6pf7/3/
EDIT: I cannot use display:table;
or height
for div1
How can I vertically align text inside the div
with the image
?
Fiddle: http://jsfiddle.net/C6pf7/3/
EDIT: I cannot use display:table;
or height
for div1
I tried putting the image as a background in the div that's one way of sort of doing it. Although you can use
vertical-align:middle
Heres a link to question already asked previously.
Use below Code:
<div id = "div1" style='float:left;width:100%'>
<p align='left' >
<img src="http://www.loriswebs.com/html-tips/images/delphinium-close1c.jpg"
id= "img1" style='float:left;'></img>
123
</p>
</div>
Set min-height:
for #div
Like
#div1{
text-align: center;
vertical-align : middle;
border: 2px solid red;
min-height:80px;
}