Vertically align multiple <p> with respect to image height

Question

I want to position an image to the left of two paragraphs of text such that the text is vertically centered with respect to the height of the image.

<div class="wrap">
    <img src="https://i.imgur.com/Yako69m.jpg" />
    <div class="text">
        <p>line1</p>
        <p>line2</p>
    </div>
</div>

demo http://jsfiddle.net/LBUyS/

Answer 1

use

float:left 

for both image and p tags. then

margin-top 

the p tag to your wish.

http://jsfiddle.net/LBUyS/3/

Answer 2

Use -ve value for

 margin-top. 
margin-top: -12%;

But, you have to take care in media query also. Use % instead of PX. Hope this will fix.

Answer 3

Here is one way of doing it using CSS table-cells.

For the HTML:

<div class="wrap">
    <div class="img-panel">
        <img src="https://i.imgur.com/Yako69m.jpg" />
    </div>
    <div class="text">
        <p>line1</p>
        <p>line2</p>
    </div>
</div>

Wrap the image in a div similar to what you did for the div.text that wraps the p elements.

Apply the following CSS:

.wrap {
    display: table;
    width: 80%; /* optional */
    margin: 0 auto; /* optional if you want to center wrapper */
}
.img-panel, .text {
    display: table-cell;
    border: 1px solid blue;
}
.img-panel {
    width: 20%;
    vertical-align: top;
}
.img-panel img {
    width: 100%;
    display: block;
}
.text {
    vertical-align: middle;
}
.text p {
    background-color: yellow;
}

Apply display: table to the wrapper, and then display: table-cell to the two child div's.

Use the vertical-align: top property to set the image to the top of its parent element, and then vertical-align: middle to position the paragraphs to the middle of the right table-cell element.

As long as the image is taller then the content to the right, you will get the layout that you need.

See demo at: http://jsfiddle.net/audetwebdesign/uG8G2/

Answer 4

Use CSS flexbox (might want to add vendor prefixes for better browser support):

.wrap {
    display: flex;
    align-items: center;
}
img {
    width:20%;
}

http://jsfiddle.net/teddyrised/LBUyS/4/