CODEWITHSUNDEEP
htmlcss
steveai
steveai

Reputation: 177

how to vertically center text beside image

Whatever I seem to do I have a problem making the take vertically center alongside of the image.

Any ideas of why this is? I've searched but to no avail, any help would be appreciated! Thanks!

(You may have to make the results window wider to see what I am talking about.)

FIDDLE

HTML:

<div class="first">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
       Quisque varius pulvinar imperdiet. Cras quam orci, <br> 
       Duis vulputate risus rutrum, elementum purus non,</p>
    <img class="ipad" src="http://www.technobuffalo.com/wp-content/uploads/2012/12/ipad-mini-scaled-1.jpg">
</div>

CSS:

p {
    margin: 0;
    padding: 1em 0;
    font-size: 1.8em;
    line-height: 1.5;
}

.first {
    height: 100%;
    vertical-align: middle;
    line-height: 0;
}

.first p {
    display: inline-block;
    width: 49%;
}

.ipad {
    display: inline-block;
    width: 49.2%;
}

Upvotes: 2

Views: 757

Answers (2)

Marc Audet
Marc Audet

Reputation: 46785

I think the following CSS may do the trick:

p {
    margin: 0;
    padding: 1em 0;
    font-size: 1.8em;
    line-height: 1.5;
}

.first {
    height: 100%;
    line-height: 0;
}

.first p {
    vertical-align: middle;
    display: inline-block;
    width: 49%;
}

.ipad {
    vertical-align: middle;
    display: inline-block;
    width: 49.2%;
}

Apply vertical-align: middle to .first p and .ipad.

The vertical-align property is not inherited, so you need to specify it for the child elements that need adjusting.

Reference: http://www.w3.org/TR/CSS2/visudet.html#propdef-vertical-align

See fiddle demo: http://jsfiddle.net/audetwebdesign/UwffH/

Upvotes: 4

Kim Barcelona
Kim Barcelona

Reputation: 1

I suggest you use <table> but it's not a good programming practice.

HTML:

<div class="first">
    <table border='0'><tr><td>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque varius pulvinar imperdiet. Cras quam orci, <br> Duis vulputate risus rutrum, elementum purus non,  </p></td><td>
        <img class="ipad" src="http://www.technobuffalo.com/wp-content/uploads/2012/12/ipad-mini-scaled-1.jpg"></td></tr></table>
                    </div>

CSS:

p {
    margin: 0;
    padding: 1em 0;
    font-size: 1.8em;
    line-height: 1.5;
}

.first {
    height: 100%;
    vertical-align: middle;
    line-height: 0;
}

.first p {
    display: inline-block;
    width: 49%;
}

.ipad {
    display: inline-block;
    width: 100%;
}

Upvotes: -1

Related Questions