如何使块元素垂直对齐？

Question

我有文字和图片。这些元素左右浮动，并且因为float不能与inline-block元素一起使用，所以我不能对这些元素vertical-align: middle;说。那么，在这种情况下，如何将这些元素彼此垂直对齐？

.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>

Answer 1

为此使用flexbox。更容易，更有用。不要使用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>