How to vertically center text next to absolute container?

Question

I'd like to vertically center this text next to the image to get a result like this:

.container {
  position: absolute; 
  width: 50%;
}

.span {
  vertical-align:middle;
  display: inline;
}

<p>
    <div class="container">
      <img style="width: 100%" src="http://placehold.it/150x50"/>
      <span class="span">should be vertically centered next to image</span>
    </div>
</p>

How to edit my code to center this text next to the ABSOLUTE container?

Any help would be very appreciated. Thanks.

If img is 100% width, text will go under it. A div inside a p is not valid , what is the need of absolute positionning here ? ... There is a lot for you to learn and get familiar with about web media or this is a big joke ;) . — G-Cyrillus, Feb 24 '18 at 21:06

score -2 · Answer 1 · answered Feb 24 '18 at 21:06

Flexbox makes this pretty straight-forward. Here's a guide in case you aren't familiar: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

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

.span {
  margin-left: 30px;
}

<p>
    <div class="container">
      <img style="width: 100%" src="http://placehold.it/150x50"/>
      <span class="span">should be vertically centered next to image</span>
    </div>
</p>

How to vertically center text next to absolute container?

1 Answers1