Html 垂直对齐图像旁边的文本？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/489340/
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
Vertically align text next to an image?
提问by sam
Why won't vertical-align: middlework? And yet, vertical-align: topdoeswork.
为什么vertical-align: middle不起作用？然而，vertical-align: top确实有效。
span{
vertical-align: middle;
}<div>
<img src="http://lorempixel.com/30/30/" alt="small img" />
<span>Doesn't work.</span>
</div>回答by Michael Haren
Actually, in this case it's quite simple: apply the vertical align to the image. Since it's all in one line, it's really the image you want aligned, not the text.
实际上，在这种情况下非常简单：将垂直对齐应用于图像。由于全部在一行中，因此实际上是您要对齐的图像，而不是文本。
<!-- moved "vertical-align:middle" style from span to img -->
<div>
<img style="vertical-align:middle" src="https://placehold.it/60x60">
<span style="">Works.</span>
</div>Tested in FF3.
在FF3中测试。
Now you can use flexbox for this type of layout.
现在您可以将 flexbox 用于这种类型的布局。
.box {
display: flex;
align-items:center;
}<div class="box">
<img src="https://placehold.it/60x60">
<span style="">Works.</span>
</div>回答by Adam Lassek
Here are some simple techniques for vertical-align:
以下是一些简单的垂直对齐技巧：
One-line vertical-align:middle
一行垂直对齐：中间
This one is easy: set the line-height of the text element to equal that of the container
这很简单：将文本元素的行高设置为等于容器的行高
<div>
<img style="width:30px; height:30px;">
<span style="line-height:30px;">Doesn't work.</span>
</div>
Multiple-lines vertical-align:bottom
多行垂直对齐：底部
Absolutely position an inner div relative to its container
相对于其容器绝对定位内部 div
<div style="position:relative;width:30px;height:60px;">
<div style="position:absolute;bottom:0">This is positioned on the bottom</div>
</div>
Multiple-lines vertical-align:middle
多行垂直对齐：中间
<div style="display:table;width:30px;height:60px;">
<div style="display:table-cell;height:30px;">This is positioned in the middle</div>
</div>
If you must support ancient versions of IE <= 7
如果您必须支持旧版本的 IE <= 7
In order to get this to work correctly across the board, you'll have to hack the CSS a bit. Luckily, there is an IE bug that works in our favor. Setting top:50%on the container and top:-50%on the inner div, you can achieve the same result. We can combine the two using another feature IE doesn't support: advanced CSS selectors.
为了使其全面正常工作，您必须稍微修改 CSS。幸运的是，有一个对我们有利的 IE 错误。设置top:50%在容器上，并top:-50%在内部DIV，可以达到同样的效果。我们可以使用 IE 不支持的另一个功能将两者结合起来：高级 CSS 选择器。
<style type="text/css">
#container {
width: 30px;
height: 60px;
position: relative;
}
#wrapper > #container {
display: table;
position: static;
}
#container div {
position: absolute;
top: 50%;
}
#container div div {
position: relative;
top: -50%;
}
#container > div {
display: table-cell;
vertical-align: middle;
position: static;
}
</style>
<div id="wrapper">
<div id="container">
<div><div><p>Works in everything!</p></div></div>
</div>
</div>
Variable container height vertical-align:middle
可变容器高度垂直对齐：中间
This solution requires a slightly more modern browser than the other solutions, as it makes use of the transform: translateYproperty. (http://caniuse.com/#feat=transforms2d)
此解决方案需要比其他解决方案更现代的浏览器，因为它使用了该transform: translateY属性。（http://caniuse.com/#feat=transforms2d）
Applying the following 3 lines of CSS to an element will vertically centre it within its parent regardless of the height of the parent element:
将以下 3 行 CSS 应用到元素将使其在其父元素内垂直居中，而不管父元素的高度如何：
position: relative;
top: 50%;
transform: translateY(-50%);
回答by Mori
Change your divinto a flex container:
将您更改div为 flex 容器：
div { display:flex; }
Now there are two methods to center the alignments for all the content:
现在有两种方法可以使所有内容的对齐居中：
Method 1:
方法一：
div { align-items:center; }
Method 2:
方法二：
div * { margin-top:auto; margin-bottom:auto; }
Try different width and height values on the imgand different font size values on the spanand you'll see they always remain in the middle of the container.
尝试不同的宽度和高度值img以及不同的字体大小值span，您会看到它们始终保留在容器的中间。
回答by christopheraue
You have to apply vertical-align: middleto both elements to have it been centered perfectly.
您必须同时应用vertical-align: middle这两个元素才能使其完美居中。
<div>
<img style="vertical-align:middle" src="http://lorempixel.com/60/60/">
<span style="vertical-align:middle">Perfectly centered</span>
</div>The accepted answerdoes center the icon around half of the x-height of the text next to it (as defined in the CSS specs). Which might be good enough but can look a little bit off, if the text has ascenders or descenders standing out just at top or bottom:
该接受的答案呢中心图标文本周围的x高度的一半旁边（如定义的CSS规范）。这可能足够好，但可能看起来有点偏离，如果文本的上升或下降仅在顶部或底部突出：
On the left, the text is not aligned, on the right it is as shown above. A live demo can be found in this article about vertical-align.
在左边，文本未对齐，在右边，如上图所示。可以在这篇关于 vertical-align 的文章中找到现场演示。
Has anyone talked about why vertical-align: topworks in the scenario?The image in the question is probably taller than the text and thus defines the top edge of the line box. vertical-align: topon the span element then just positions it at the top of the line box.
有没有人谈到为什么vertical-align: top在这个场景中起作用？问题中的图像可能比文本高，因此定义了行框的顶部边缘。vertical-align: top在 span 元素上，然后将其放置在行框的顶部。
The main difference in behavior between vertical-align: middleand topis that the first moves elements relative to the box's baseline (which is placed wherever needed to fulfill all vertical alignments and thus feels rather unpredictable) and the second relative to the outer bounds of the line box (which is more tangible).
vertical-align: middle和之间行为的主要区别top在于，第一个相对于框的基线移动元素（放置在需要满足所有垂直对齐的地方，因此感觉相当不可预测），第二个相对于行框的外边界（即更有形）。
回答by Danield
The technique used in the accepted answer works only for single-lined text (demo), but not multi-line text (demo) - as noted there.
已接受的答案中使用的技术仅适用于单行文本 ( demo)，而不适用于多行文本 ( demo) - 如此处所述。
If anyone needs to vertically center multi-lined text to an image, here are a few ways (Methods 1 and 2 inspired by this CSS-Tricks article)
如果有人需要将多行文本垂直居中到图像，这里有几种方法（方法 1 和 2 受此CSS-Tricks 文章启发）
Method #1: CSS tables (FIDDLE) (IE8+ (caniuse))
方法 #1：CSS 表格 ( FIDDLE) (IE8+ ( caniuse))
CSS:
CSS：
div {
display: table;
}
span {
vertical-align: middle;
display: table-cell;
}
Method #2: Pseudo element on container (FIDDLE) (IE8+)
方法#2：容器上的伪元素（FIDDLE）（IE8+）
CSS:
CSS：
div {
height: 200px; /* height of image */
}
div:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -0.25em; /* Adjusts for spacing */
}
img {
position: absolute;
}
span {
display: inline-block;
vertical-align: middle;
margin-left: 200px; /* width of image */
}
Method #3: Flexbox (FIDDLE) (caniuse)
方法 #3: Flexbox ( FIDDLE) ( caniuse)
CSS(The above fiddle contains vendor prefixes):
CSS（上面的小提琴包含供应商前缀）：
div {
display: flex;
align-items: center;
}
img {
min-width: 200px; /* width of image */
}
回答by HTMLnewBie
This code works in IE as well as FF:
此代码适用于 IE 和 FF：
<div>
<img style="width:auto; height:auto;vertical-align: middle;">
<span>It does work on all browsers</span>
</div>
回答by Ikke
Because you have to set the line-heightto the height of the div for this to work
因为您必须将 设置line-height为 div 的高度才能使其工作
回答by Dan
Basically, you'll have to get down to CSS3.
基本上，您必须深入了解 CSS3。
-moz-box-align: center;
-webkit-box-align: center;
回答by nullpoint81
Another thing you can do is set the text's line-heightto the size of the images within the <div>. Then set the images to vertical-align: middle;
您可以做的另一件事是将文本设置line-height为<div>. 然后将图片设置为vertical-align: middle;
That's seriously the easiest way.
这真的是最简单的方法。
回答by David
For the record, alignment "commands" shouldn't work on a SPAN, because it is an in-linetag, not a block-leveltag. Things like alignment, margin, padding, etc won't work on an in-line tag because the point of inline is not to disrupt the text flow.
为了记录在案，对齐“命令”应在SPAN不行的，因为它是一个在线的标签，而不是块级标签。对齐、边距、填充等内容不适用于内联标签，因为内联的重点是不会破坏文本流。
CSS divides HTML tags up into two groups: in-line and block-level. Search "css block vs inline" and a great article shows up...
CSS 将 HTML 标签分为两组：行内标签和块级标签。搜索“css block vs inline”，就会出现一篇很棒的文章......
http://www.webdesignfromscratch.com/html-css/css-block-and-inline/
http://www.webdesignfromscratch.com/html-css/css-block-and-inline/
(Understanding core CSS principles is a key to it not being quite so annoying)
（了解核心 CSS 原则是让它不那么烦人的关键）
