Center content of two side-by-side divs vertically no matter what size content

Question

I am trying to figure out a way to vertically center the content of two side-by-side divs when there is an image on the left, and text on the right. The only problem is, that it has to work even if the length of the paragraph changes. Is there a way to ensure that the image/paragraph in each "section" are always centered vertically, regardless of if the image height is larger or smaller than the paragraph text height?

HTML:

<div class="section">
  <div class="paragraph">
    <img src="http://placehold.it/350x150" />
    <p>
       Lorem ipsum delor sit amet Lorem ipsum delor sit amet Lorem ipsum delor sit amet 
       Lorem ipsum delor sit amet Lorem ipsum delor sit amet
    </p>
  </div>
</div>
<div class="section">
  <div class="paragraph">
    <img src="http://placehold.it/350x150" />
    <p>
       Lorem ipsum delor sit amet Lorem ipsum delor sit amet 
       Lorem ipsum delor sit amet Lorem ipsum delor sit amet 
       Lorem ipsum delor sit amet Lorem ipsum delor sit amet 
       Lorem ipsum delor sit amet Lorem ipsum delor sit amet 
       Lorem ipsum delor sit amet Lorem ipsum delor sit amet 
       Lorem ipsum delor sit amet Lorem ipsum delor sit amet 
       Lorem ipsum delor sit amet Lorem ipsum delor sit amet 
       Lorem ipsum delor sit amet Lorem ipsum delor sit amet 
       Lorem ipsum delor sit amet Lorem ipsum delor sit amet 
       Lorem ipsum delor sit amet Lorem ipsum delor sit amet 
       Lorem ipsum delor sit amet Lorem ipsum delor sit amet 
       Lorem ipsum delor sit amet Lorem ipsum delor sit amet 
       Lorem ipsum delor sit amet Lorem ipsum delor sit amet 
       Lorem ipsum delor sit amet Lorem ipsum delor sit amet 
       Lorem ipsum delor sit amet Lorem ipsum delor sit amet 
       Lorem ipsum delor sit amet Lorem ipsum delor sit amet 
       Lorem ipsum delor sit amet Lorem ipsum delor sit amet 
       Lorem ipsum delor sit amet Lorem ipsum delor sit amet 
       Lorem ipsum delor sit amet Lorem ipsum delor sit amet 
       Lorem ipsum delor sit amet Lorem ipsum delor sit amet
     </p>
  </div>
</div>

CSS:

.section {
  padding: 1% 0;
  clear: both;
  display: block;
  overflow: hidden;
}
img {
  width: 25%;
}
p {
  margin: 0;
  width: 50%;
}
img, p {
  float: left;
  padding: 2% 1%;
}

My jsfiddle: https://jsfiddle.net/fLgsrqqm/

Possible duplicate of [How to center an element horizontally and vertically?](http://stackoverflow.com/questions/19461521/how-to-center-an-element-horizontally-and-vertically) — Himanshu Aggarwal, Mar 07 '17 at 17:51

score 1 · Accepted Answer · answered Mar 07 '17 at 17:08

1

Just change this rule: (no float, vertical-align: middle)

img, p {
  display: inline-block;
  padding: 2% 1%;
  vertical-align: middle;
}

https://jsfiddle.net/3wt1t8zx/

answered Mar 07 '17 at 17:08

Johannes

64,305
18
73
130

score 1 · Answer 2 · answered Mar 07 '17 at 17:12

1

Add below code and see if it works:

.paragraph {
    display:flex;
    align-items:center;
}

answered Mar 07 '17 at 17:12

cypark

838
6
21

score 0 · Answer 3 · answered Mar 07 '17 at 17:10

0

Have you tried using CSS3 Flexbox to do the layout: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Also have a look at: http://caniuse.com/#search=flexbox

answered Mar 07 '17 at 17:10

Mortolian

59
7

Center content of two side-by-side divs vertically no matter what size content

3 Answers3