Html CSS在同一行上对齐图像和文本
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13596821/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS align images and text on same line
提问by Keith Drake Waggoner
I have been searching and trying different methods for hours now. I just can't seem to get these two images and text all on one line. I want both the images and both text to all be on one line arranged image, text, image, text My images are coded like this with simple styles attacted
几个小时以来，我一直在寻找和尝试不同的方法。我似乎无法将这两个图像和文本全部放在一行中。我希望图像和文本都在一行上排列图像，文本，图像，文本我的图像是这样编码的，带有简单的样式
<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>
My "liketext" class is just has a simple text color modifier. With this code the first image and text are on the same line, and the the next image and text is on the line below. I want all four objects to be on the same line. I really have tried to solve this question on my own and appreciate any help given and hopefully this post can help others as well thank you!
我的“liketext”类只有一个简单的文本颜色修饰符。使用此代码，第一个图像和文本在同一行上，下一个图像和文本在下一行。我希望所有四个对象都在同一行上。我真的试图自己解决这个问题，并感谢您提供的任何帮助，希望这篇文章也能帮助其他人，谢谢！
回答by adrift
You can either use (on the h4 elements, as they are block by default)
您可以使用（在 h4 元素上，因为它们默认是块）
display: inline-block;
Or you can float the elements to the left/rght
或者您可以将元素浮动到左/右
float: left;
Just don't forget to clear the floats after
只是不要忘记在之后清除浮动
clear: left;
More visual example for the float left/right option as shared below by @VSB:
@VSB 在下面共享的浮动左/右选项的更多视觉示例：
<h4>
<div style="float:left;">Left Text</div>
<div style="float:right;">Right Text</div>
<div style="clear: left;"/>
</h4>回答by Brady Huang
You can simply center the image and text in the parent tag by setting
您可以通过设置简单地将图像和文本居中在父标签中
div {
text-align: center;
}
vertical center the img and span
将 img 和 span 垂直居中
img {
vertical-align:middle;
}
span {
vertical-align:middle;
}
You can just add second set below, and one thing to mention is that h4 has block display attribute, so you might want to set
你可以在下面添加第二组，还有一件事是 h4 有块显示属性，所以你可能想要设置
h4 {
display: inline-block
}
to set the h4 "inline".
设置h4“内联”。
The full example is shown here.
此处显示了完整示例。
<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>回答by Cristian Traìna
This question is from 2012, some things are changed from that date, and since it still receives a lot of traffic from google, I feel like completing it adding flexboxas a solution.
这个问题是从 2012 年开始的，从那一天起有些事情发生了变化，而且由于它仍然收到了来自 google 的大量流量，我想完成它添加flexbox作为解决方案。
By now, flexboxis the advised pattern to be used, even if it lacks IE9 support.
到目前为止，flexbox是建议使用的模式，即使它缺乏 IE9 支持。
The only thing you have to care about is adding display: flexin the parent element. As default and without the need of setting other property, all the children of that element will be aligned in the same row.
您唯一需要关心的是添加display: flex父元素。默认情况下，无需设置其他属性，该元素的所有子元素将在同一行中对齐。
If you want to read more about flexbox, you can do it here.
如果您想阅读更多相关信息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>回答by David Morgan
First, I wouldn't recommend using inline styles. If you must, you should try applying floats to each item:
首先，我不建议使用内联样式。如果必须，您应该尝试将浮动应用于每个项目：
<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>
It might require some tweaking afterwards, and clearing the floats.
之后可能需要进行一些调整，并清除浮动。
回答by sinisterfrog
See example at: http://jsfiddle.net/6Rpkh/
参见示例：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>
?
?
回答by trev
A H4 elemental is a block display type element. You could force the H4 to have a inline display type, or simply use an inline element like P instead and style it however you require.
H4 元素是块显示类型的元素。您可以强制 H4 具有内联显示类型，或者简单地使用像 P 这样的内联元素并根据需要对其进行样式设置。
For reference: http://www.w3.org/TR/CSS21/visuren.html#propdef-display
供参考：http: //www.w3.org/TR/CSS21/visuren.html#propdef-display
So you'd change the display type of the H4 like:
因此，您可以更改 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>
回答by Ayyappan K
In this case you can use display:inline or inline-block.
在这种情况下，您可以使用 display:inline 或 inline-block。
Example:
例子：
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>Don't use float:left because again need to write one more clear line and its old method also..
不要使用 float:left 因为再次需要写一个更清晰的行和它的旧方法。
回答by Raj
vertical-align: text-bottom;
Tested, this worked for me perfectly, just apply this to the image.
经过测试，这对我很有效，只需将其应用于图像即可。
