CODEWITHSUNDEEP
htmlcss
Vishnu Simbu
Vishnu Simbu

Reputation: 175

HTML : Image in same line appearing slightly above text

Please see the example at DEMO , It has following html code

helllo hello test test <img src="http://bestsites.me/img/bs.png">

You can see that image is slightly above text.How can i make the image to come little down.

Upvotes: 1

Views: 1482

Answers (3)

Learner
Learner

Reputation: 221

you can use
<img align='middle'>

Align middle will work for you

Aligning image with text should work. <img src='src' align='middle'> will make you image to appear in the middle

Upvotes: 0

bashleigh
bashleigh

Reputation: 9314

HTML:

<p>hello hello test test<img src="image.png"/></p>

CSS:

p,img{
    padding:0px;
    margin:0px;
}

The above should make sure the p and image element are inline with each other.

Another method:

HTML

<p>Hello Hello test test</p><img src='image.png'/>

CSS

p,img{
    padding:0px;
    margin:0px;
    display:inline-block;//not for ie 5.5-7?
    width:49%;
    vertical-align:top;
    text-align:top;
    border:1px solid #FF0000;//to check the positioning of the elements
    //these should now be completely level BUT this might not make the text 100% level
}

Upvotes: 0

reader_1000
reader_1000

Reputation: 2501

I am not sure this is the best way of achieving this but you may use:

helllo hello test test <img src="http://bestsites.me/img/bs.png" style="margin-bottom: -7px;">

or you can edit your picture in some photo editing software (gimp, vs).

Upvotes: 2

Related Questions