9

Possible Duplicate:
How do I vertically align text next to an image with CSS?

I have difficulties to center spans vertically middle in div.

This simple code: http://jsfiddle.net/4hDTb/

HTML:

<div class="bar">
    <span>Simple text</span>
    <img src="" class="img1" />
    <span>Another text</span>
    <img src="" class="img2" />
</div>​

CSS:

.bar
{
    width: 100%;
    height: 50px;
    border: 1px black solid;
}
.img1
{
    width: 100px;
    height: 50px;
    border: 1px black solid;
}

.img2
{
    width: 200px;
    height: 50px;
    border: 1px black solid;

}

How to center <span>s in div.bar vertically middle?

​

Community
  • 1
  • 1
Lari13
  • 1,850
  • 10
  • 28
  • 55

2 Answers2

17

just add img{vertical-align:middle}. it's the image you would want to align, not the text.

Joseph
  • 117,725
  • 30
  • 181
  • 234
1

if you know the height of the container -- you can use line-height http://jsfiddle.net/4hDTb/3/ check the fiddle..

Vivek Chandra
  • 4,240
  • 9
  • 33
  • 38