CSS 将图像和文本对齐在同一行

Question

几个小时以来，我一直在搜索和尝试不同的方法。我似乎无法将这两个图像和文本全部放在一行中。我希望图像和文本都在一行上排列 image, text, image, text 我的图像用简单的样式编码

 <img style='height: 24px; width: 24px; margin-right: 4px;' src='design/like.png'/><h4 class='liketext'>$likes</h4>
 <img style='height: 24px; width: 24px; margin-right: 4px;' src='design/dislike.png'/><h4 class='liketext'>$dislikes</h4>

我的“liketext”类只有一个简单的文本颜色修饰符。使用此代码，第一个图像和文本位于同一行，下一个图像和文本位于下一行。我希望所有四个对象都在同一条线上。我真的已经尝试自己解决这个问题，感谢您提供的任何帮助，希望这篇文章也能帮助其他人，谢谢！

原文由 Keith Drake Waggoner 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您可以使用（在 h4 元素上，因为它们默认是块）

 display: inline-block;

或者你可以将元素浮动到左/右

float: left;

只是不要忘记在之后清除浮动

clear: left;

---

下面由 @VSB 分享的浮动左/右选项的更多可视化示例：

 <h4>
    <div style="float:left;">Left Text</div>
    <div style="float:right;">Right Text</div>
    <div style="clear: left;"/>
</h4>

原文由 Adrift 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

您可以通过设置简单地在父标签中居中图像和文本

div {
     text-align: center;
}

垂直居中 img 和 span

 img {
     vertical-align:middle;
}
span {
     vertical-align:middle;
}

您可以在下面添加第二组，还有一件事是 h4 具有块显示属性，因此您可能需要设置

h4 {
    display: inline-block
}

设置 h4“内联”。

完整示例显示在此处。

 <div id="photo" style="text-align: center">
  <img style="vertical-align:middle" src="https://via.placeholder.com/22x22" alt="">
  <span style="vertical-align:middle">Take a photo</span>
</div>

原文由 Brady Huang 发布，翻译遵循 CC BY-SA 4.0 许可协议