2 Replies - 1478 Views - Last Post: 07 January 2014 - 06:44 PM

#1 y0yie_333   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 14
  • Joined: 09-October 10

how to align the text and the image ?

Posted 05 January 2014 - 01:37 AM

how to align the text in the image ??
here's my code...

p{ padding:0 10px 0 0;}
    im{margin:0px; padding:0 10px 0 0; vertical-align:middle; width:95px; height:90px; }

    <p><img src="" alt="imgae">Micheal Jordan Lebron James dimasopil</p>


and here's the output..some of the text when down in the image..why ?

Posted Image

Is This A Good Question/Topic? 0
  • +

Replies To: how to align the text and the image ?

#2 andrewsw   User is offline

  • Bouncy!
  • member icon

Reputation: 6563
  • View blog
  • Posts: 26,615
  • Joined: 12-December 12

Re: how to align the text and the image ?

Posted 05 January 2014 - 05:38 AM

Put the adjacent text in a span:
<p><img src="" alt="imgae"><span>Micheal Jordan Lebron James dimasopil</span></p>

I seriously doubt that you will get it to work without this additional element, mainly because vertical-align applies to inline elements.
    p {
        display: table;     /* IE8+ */
        padding: 0 10px 0 0;
        width: 250px;
    }
    span {
        vertical-align: middle;
        display: table-cell;
    }
    img {
        margin: 0; padding: 0 10px 0 0;
        vertical-align: middle;
        width: 95px; height: 90px;
    }

The p-tag is given display: table. (I gave the p-tag a width purely for test purposes; presumably your p's width is already constrained by a parent-element.)

Notice that both the span and img are given vertical-align: middle.

Centering in the Unknown :css-tricks

There is an SO discussion here but note that the accepted answer doesn't work for multi-line text. (If you read this discussion make sure you read it all, as a lot of the comments or suggestions prove to be nonsense!)

I should mention that another solution would be to use a table, but this is much worse IMO than just introducing a span and using css table-properties.

This post has been edited by andrewsw: 05 January 2014 - 05:40 AM

Was This Post Helpful? 0
  • +
  • -

#3 omega14   User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 7
  • Joined: 13-December 13

Re: how to align the text and the image ?

Posted 07 January 2014 - 06:44 PM

<style>
p{ padding:0 10px 0 0;}
    img{margin:0px; padding:0 10px 0 0; vertical-align:middle; width:95px; height:90px; }
</style>
   <p><img src="awesomeImage.png" alt="imgae">Micheal Jordan Lebron <br>James dimasopil</p>



You need the <br> tag and it's img not im.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1