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

Question

我现在一直在寻找和尝试不同的方法几个小时.我似乎无法将这两个图像和文本全部放在一行上.我希望图像和两个文本都在一行上排列图像,文本,图像,文本我的图像编码如此,简单的样式被吸引

 <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"类只是一个简单的文本颜色修饰符.使用此代码,第一个图像和文本位于同一行,下一个图像和文本位于下面的行上.我希望所有四个对象都在同一条线上.我真的试图自己解决这个问题,并感谢任何给予的帮助,希望这篇文章可以帮助别人,谢谢你!

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>

Answer 2

这个问题是从 2012 年开始的，从那一天起有些事情发生了变化，而且由于它仍然收到了来自 google 的大量流量，我想完成它添加flexbox作为解决方案。

到目前为止，flexbox是建议使用的模式，即使它缺乏 IE9 支持。

您唯一需要关心的是添加display: flex父元素。默认情况下，无需设置其他属性，该元素的所有子元素将在同一行中对齐。

如果您想阅读更多相关信息flexbox，可以在此处进行。

.container {
  display: flex;
}

img {
  margin: 6px;
}

<div class="container">
  <img src="https://placekitten.com/g/300/300" /> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

Answer 3

您可以通过设置来简单地将图像和文本置于父标记的中心

div {
     text-align: center;
}

垂直居中img和跨度

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

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

h4 {
    display: inline-block
}

设置h4“内联”。

完整的示例如下所示。

div {
     text-align: center;
}

Answer 4

vertical-align: text-bottom;

经过测试，这对我来说非常有效，只需将其应用到图像上即可。