How to vertically align image and text in table cell?

Question

I'm trying to get the text to be on the right side and vertically center aligned with the image. How can I do that?

My current code:

<div style="display: table;">
  <div style="display: table-cell;"><img src="//dummyimage.com/100"></div>
  <div style="display: table-cell;">text</div>
</div>

Answer 1

use CSS3 Flexible Box Layout:

from the documentation:

providing for the arrangement of elements on a page such that the elements behave predictably when the page layout must accommodate different screen sizes and different display devices. For many applications, the flexible box model provides an improvement over the block model in that it does not use floats, nor do the flex container's margins collapse with the margins of its contents.

your example with centered text to the right would look like this

#pageElement{display:flex; flex-wrap: nowrap; align-items: center}

<div id="pageElement">
  <div> <img src="//dummyimage.com/100"> </div>
  <div> text </div>
</div>

I found this cheat-sheet very helpful and browser compatibility you find here