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

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

div {
     text-align: center;
}

使img和跨度垂直居中

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>

Answer 3

首先，我不建议使用内联样式。如果必须，您应该尝试将浮动应用于每个项目：

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

之后可能需要进行一些调整，并清除花车。

Answer 4

请参阅示例：http://jsfiddle.net/6Rpkh/

<style>
img.likeordisklike { height: 24px; width: 24px; margin-right: 4px; }
h4.liketext { color:#F00; display:inline }
</style>

<img class='likeordislike' src='design/like.png'/><h4 class='liketext'>$likes</h4>
<img class='likeordislike' src='design/dislike.png'/><h4 class='liketext'>$dislikes</h4>

Answer 5

H4元素是块显示类型元素。您可以强制H4具有内联显示类型，或者只是使用像P这样的内联元素，并根据需要设置样式。

供参考：http://www.w3.org/TR/CSS21/visuren.html#propdef-display

所以你要改变H4的显示类型，如：

<html>
<head>
   <title>test</title>
   <style type='text/css'>
     h4 { display: inline }
   </style>
  </head>
  <body>
  <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>
</body>
</html>

Answer 6

在这种情况下，您可以使用display：inline或inline-block。

<强> 实施例

img.likeordisklike {display:inline;vertical-align:middle;  }
h4.liketext { color:#F00; display:inline;vertical-align:top;padding-left:10px; }

<img class='likeordislike' src='design/like.png'/><h4 class='liketext'>$likes</h4>
<img class='likeordislike' src='design/dislike.png'/><h4 class='liketext'>$dislikes</h4>

不要使用float：left因为再次需要写一个更清晰的行及其旧方法也是..

Answer 7

这个问题是从2012年开始的，有些事情从那个日期开始有所改变，而且由于它仍然会收到来自谷歌的大量流量，我觉得要完成它添加 flexbox 作为解决方案。

到目前为止， flexbox 是要使用的建议模式，即使它是lacks of IE9 support。

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

如果您想了解有关display: flex的更多信息，可以here进行阅读。

flexbox

.container {
  display: flex;
}

img {
  margin: 6px;
}

Answer 8

vertical-align: text-bottom;

经过测试，这对我来说非常合适，只需将其应用于图像。

Answer 9

尝试在img内插入h4 DEMO

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

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

9 个答案: