Search code examples
htmlcssvertical-alignment

HTML - Vertically align responsive content

I am trying to vertically align content inside of a block - the content is an image on left (no text under it) and a paragraph of text. When the text is on a large screen, the height of the paragraph is smaller than the height of the image and thus the paragraph should be vertically aligned to middle. On the other hand, while the content is displayed on smaller screen, the paragraph's height is bigger than the image and the image should be vertically aligned. Centering the image is easy, because I know the height, but how to handle responsive paragraph? Everything i have tried resulted in some weird behavior - for example blocks overlapping each other when on a small screen. So I start to thing that its not possible by CSS and I need some Javascript for it.

HTML:

<div class="entry">
<img src="http://placehold.it/100x100" alt="" />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eu rhoncus eros. Nunc ac mollis velit. Cras vitae odio fringilla, consectetur felis id, maximus quam. Nulla placerat felis nec malesuada mattis. </p>
</div>
<div class="entry">
<img src="http://placehold.it/100x100" alt="" />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eu rhoncus eros. Nunc ac mollis velit. Cras vitae odio fringilla, consectetur felis id, maximus quam. Nulla placerat felis nec malesuada mattis.</p>
</div>

CSS:

div.entry {
    margin-bottom: 10px;
    min-height: 100px;
    padding: 0 10px 0 120px;
    position: relative;
}

div.entry img {
    bottom: 0;
    left: 0;
    margin: auto 0;
    position: absolute;
    right: 0;
    top: 0;
    width: 100px;
}

The example can be found here: http://jsfiddle.net/46psK/2583/

Solution

  • Solved using Flexible box method. Set the parent container as flex and align the items inside to be centered along the cross-axis

    div.entry {
  margin-bottom: 10px;
  min-height: 100px;
  padding: 0 10px 0 120px;
  position: relative;
  display: flex;
  align-items: center;
}
div.entry img {
  bottom: 0;
  left: 0;
  margin: auto 0;
  position: absolute;
  right: 0;
  top: 0;
  width: 100px;
}
    <div class="entry">
  <img src="http://placehold.it/100x100" alt="" />
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eu rhoncus eros. Nunc ac mollis velit. Cras vitae odio fringilla, consectetur felis id, maximus quam. Nulla placerat felis nec malesuada mattis.</p>
</div>
<div class="entry">
  <img src="http://placehold.it/100x100" alt="" />
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eu rhoncus eros. Nunc ac mollis velit. Cras vitae odio fringilla, consectetur felis id, maximus quam. Nulla placerat felis nec malesuada mattis.</p>
</div>