我有一个文本和一个图像。它们向左和向右浮动，因为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>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>本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句