CSS 2 divs same vertical centered

Question

I have a problem vertically centering 2 divs beside each other:

DIV 1 & 2:

And this is what I want to achieve. I would prefer a solution that works for any resolution, or changes with the size on the parent div.

My Goal:

You can clearly see the difference; the text and image are correctly vertical aligned. :)

And this is my code simplyfied:

<html>
  <head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/css/materialize.min.css">
  </head>
  <body>
    <div class="bet-content">
      <div class="bet-prof" style="display: inline-block;">
        <img src="http://cdn.akamai.steamstatic.com/steamcommunity/public/images/avatars/b4/b441963ddcb84390a0caafbb7b7399b0cffbccba_medium.jpg" style="border-radius: 20px;">
      </div>
      <div class="bet-desc" style="display: inline-block;">
        <span style="font-size: 18px; display: block;">Insanic as <img src="https://csgoreaper.com/assets/images/coinflip/coin-ct.png" style="vertical-align:middle;" height="32px"></span>
        <span>With a wager of <span style="color: #e7aa18;">$20.0</span></span>
      </div>
    </div>
  </body>
</html>

Again it's hard to see without your code, but a possibility is applying margin-top to the image. — paddyfields, Mar 08 '17 at 20:49

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

Flexbox comes to mind:

<html>
  <head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/css/materialize.min.css">
  </head>
  <body>
    <div class="bet-content" style="display: flex; align-items:center;">
      <div class="bet-prof" style="display: inline-block; background: red;">
        <img src="http://cdn.akamai.steamstatic.com/steamcommunity/public/images/avatars/b4/b441963ddcb84390a0caafbb7b7399b0cffbccba_medium.jpg" style="border-radius: 20px;">
      </div>
      <div class="bet-desc" style="display: inline-block; background: green;">
        <span style="font-size: 18px; display: block;">Insanic as <img src="https://csgoreaper.com/assets/images/coinflip/coin-ct.png" style="vertical-align:middle;" height="32px"></span>
        <span>With a wager of <span style="color: #e7aa18;">$20.0</span></span>
      </div>
    </div>
  </body>
</html>

@NabilHayek You're welcome. Actually now that I see it, you can remove the `display: inline-block;` rules from both flex-items :) — , Mar 08 '17 at 21:23

CSS 2 divs same vertical centered

1 Answers1