How can I make my block elements to align vertically?

Question

I have a text and an image. These are floated to left and right, and because float isn't working with inline-block elements, I can't say to these elements vertical-align: middle;. So, in this case, how can I align vertically these elements to each other?

.floatLeft {
  float: left;
}

.sitename {
  font-size: 1.7em;
}

.floatRight {
  float: right;
}

.innerNav-container:before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  height: 100%;
}

<nav>
  <div class="innerNav-container">
    <p class="floatLeft sitename innerNav-padding">Text</p>
    <img class="floatRight items innerNav-padding" src="/ico/img.png" alt="img">
    <div style="clear: both;"></div>
  </div>
</nav>

It might be time to let `float` go... :) Read up on [flexbox](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox), [grids](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Grids), etc. — Heretic Monkey, Jan 25 '19 at 14:41

score 0 · Accepted Answer · answered Jan 25 '19 at 14:41

Use flexbox for this. More easy and more useful. Don't use float

nav {
  display:flex;
  justify-content:space-between;
  align-items:center;
}

<nav>

    <p>Text</p>
    <img class="floatRight items innerNav-padding" src="https://picsum.photos/50" alt="img">
</nav>

How can I make my block elements to align vertically?

1 Answers1