CODEWITHSUNDEEP
htmlcss
user1924247
user1924247

Reputation: 171

Can't align image with text

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?

Upvotes: 0

Views: 111

Answers (6)

Thanos
Thanos

Reputation: 3059

EXAMPLE

Simple and easy. Enjoy

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

Upvotes: 0

Falguni Panchal
Falguni Panchal

Reputation: 8981

Like this

DEMO

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

Upvotes: 0

Roy M J
Roy M J

Reputation: 6938

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/

Upvotes: 0

Arun Bertil
Arun Bertil

Reputation: 4638

check the js fiddle

http://jsfiddle.net/5vzBS/

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

Upvotes: 0

Paul McLean
Paul McLean

Reputation: 3550

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

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

Upvotes: 0

Mihai Matei
Mihai Matei

Reputation: 24276

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

Upvotes: 2

Related Questions