-6

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

Carl0s1z
  • 4,683
  • 7
  • 32
  • 47
fox
  • 287
  • 5
  • 16
  • 2
    "Nice" trick to get around the requirement of including code in your question when you like to jsfiddle. Now try asking a proper question (you might want to explain what you mean by "align with the image"). – Quentin Apr 04 '14 at 11:25
  • add display:table; to #div1 in CSS – Hamed Ali Khan Apr 04 '14 at 11:27
  • Dup; [Vertically Align text in a Div](http://stackoverflow.com/questions/2939914/vertically-align-text-in-a-div) – Alex K. Apr 04 '14 at 11:28
  • The question is better for your edit, but you haven't got the hang of *including code in the question* yet. – Quentin Apr 04 '14 at 11:28

4 Answers4

1

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.

Vertically align text next to an image?

Community
  • 1
  • 1
Harry
  • 3,031
  • 7
  • 42
  • 67
1

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>
ngrashia
  • 9,869
  • 5
  • 43
  • 58
  • This is not for vertical align. The code is for Align text and image side by side. No downvotes pls!! – ngrashia Apr 04 '14 at 11:33
0

Set min-height: for #div

Like

#div1{
   text-align: center;
    vertical-align : middle;
    border: 2px solid red;
    min-height:80px;
}
Vinod VT
  • 6,946
  • 11
  • 51
  • 75
0

Use line-height:75px in your css and add a new div with style="clear:both;"

Css:

#div1{
       text-align: center;
        vertical-align : middle;
        border: 2px solid red;
        line-height: 75px;   /* Add this */
}

Updated Fiddle

Carl0s1z
  • 4,683
  • 7
  • 32
  • 47