Can't align image with text

Question

I'm having problem aligning an image with text.

#content img{
    border: 2px solid black;
    vertical-align: middle;
}

<div id="content">
    <h1><b>Company News 1</b></h1>
    <img src="http://www.placehold.it/120x120">
    <span style="">
        A lot of text...
    </span>
</div>

The result is this:

enter image description here

What am I doing wrong?

see this link somebody was already answered this may help you http://stackoverflow.com/questions/6282403/how-to-vertically-align-a-div-next-to-an-image — , Aug 28 '13 at 06:47
see this also http://www.htmlgoodies.com/tutorials/getting_started/article.php/3479311/So-You-Want-To-Align-Text-Huh.htm — , Aug 28 '13 at 06:53

score 2 · Accepted Answer · answered Aug 28 '13 at 06:28

2

#content img{
  border: 2px solid black;
  float:left;
  margin-right:5px;
}

answered Aug 28 '13 at 06:28

Mihai Matei

24,166
5
32
50

score 0 · Answer 2 · answered Aug 28 '13 at 06:28

0

I'm assuming you want the text to wrap the image? Try the following instead -

#content img {
border: 2px solid black;
float: left;
}

answered Aug 28 '13 at 06:28

Paul McLean

3,450
6
26
36

score 0 · Answer 3 · answered Aug 28 '13 at 06:30

0

check the js fiddle

http://jsfiddle.net/5vzBS/

#content img
{
     border: 2px solid black;
     vertical-align: middle;
     float:left;
}

answered Aug 28 '13 at 06:30

Arun Bertil

4,598
4
33
59

score 0 · Answer 4 · edited Aug 28 '13 at 06:33

0

Like this

DEMO

#content img {
    border: 2px solid black;
    vertical-align: middle;
    float: left;
    margin: 0 10px;
}

edited Aug 28 '13 at 06:33

hresult

301
2
15

answered Aug 28 '13 at 06:31

Falguni Panchal

8,873
3
27
33

score 0 · Answer 5 · answered Aug 28 '13 at 06:31

0

Use float:left property

#content img{
    border: 2px solid black;
    vertical-align: middle;
    width:120px;
    height:120px;
    float:left;
}

Fiddle : http://jsfiddle.net/kJHK7/1/

answered Aug 28 '13 at 06:31

Roy M J

6,926
7
51
78

score 0 · Answer 6 · answered Aug 28 '13 at 06:47

0

EXAMPLE

Simple and easy. Enjoy

#content img {
    border: 2px solid black;
    vertical-align: middle;
    float:left;
    margin:0 20px 10px 0;
}

answered Aug 28 '13 at 06:47

Thanos

3,039
2
14
28

Can't align image with text

6 Answers6