CSS在同一行对齐图像和文本
Posted
技术标签:
【中文标题】CSS在同一行对齐图像和文本【英文标题】：CSS align images and text on same line 【发布时间】：2012-11-15 19:36:35 【问题描述】：我已经搜索并尝试了几个小时的不同方法。我似乎无法将这两个图像和文本全部放在一行上。我希望图像和文本都在一行上排列图像，文本，图像，文本我的图像是这样编码的，带有简单的样式
<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”类只有一个简单的文本颜色修饰符。使用此代码，第一个图像和文本位于同一行，下一个图像和文本位于下一行。我希望所有四个对象都在同一行。我真的尝试过自己解决这个问题，并感谢所提供的任何帮助，希望这篇文章也能帮助其他人，谢谢！
【问题讨论】：
将它们放在 div 中并使用display: inline 或 inline-block。另外，请使用float: left;。我以前遇到过这个。这就像一个魅力。
非常感谢您的回答，我只需要将所有元素浮动。我的粗心错误，但希望这可以帮助其他面临同样问题的人！
不用担心。我自己很快就会忘记这一点，这篇文章会有所帮助。
【参考方案1】：
这个问题是从 2012 年开始的，从那一天起有些事情发生了变化，由于它仍然从 google 获得大量流量，所以我想完成它添加 flexbox 作为解决方案。
到目前为止，flexbox 是建议使用的模式，即使它是 lacks IE9 support。
您唯一需要关心的是在父元素中添加display: flex。默认情况下，无需设置其他属性，该元素的所有子元素将在同一行对齐。
如果你想了解更多关于flexbox的信息，你可以这样做here。
.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>【讨论】：
我只用了上面的代码，还给.container加了一个line-height: 300px; /*which has to be the height of the container*/
@SándorZuboly 你也可以试试align-items: center【参考方案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" >
<span style="vertical-align:middle">Take a photo</span>
</div>【讨论】：
【参考方案3】：vertical-align: text-bottom;
经过测试，这对我来说非常有效，只需将其应用于图像即可。
【讨论】：
【参考方案4】：您可以使用（在 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>【讨论】：
非常感谢您的回答，我只需要将所有元素浮动。我的粗心错误，但希望这可以帮助其他面临同样问题的人！<h4> <div style="float:left;"> Left Text</div> <div style="float:right;">Right Text</div> <div style="clear: left;"/> </h4> 【参考方案5】：
在这种情况下，您可以使用 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，因为还需要再写一条清晰的线和它的旧方法..
【讨论】：
【参考方案6】：尝试将您的 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>
【讨论】：
【参考方案7】：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>
【讨论】：
【参考方案8】：参见示例：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>
【讨论】：
【参考方案9】：首先，我不建议使用内联样式。如果必须，您应该尝试将浮点数应用于每个项目：
<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>
之后可能需要进行一些调整，并清除浮动。
【讨论】：
以上是关于CSS在同一行对齐图像和文本的主要内容，如果未能解决你的问题，请参考以下文章
有几张高度不一样的小图片，如何用html+css实现在同一行垂直居中对齐？
使用Bootstrap响应式设计使两个html元素保持在同一行