Html 垂直对齐图像和多行文本
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6524029/
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
Vertical align an image and a multiline text
提问by bceo
I′m trying to align an image and a text vertically:
我正在尝试垂直对齐图像和文本：
+-------------------------+ -- Viewport | Text text text | | +-----+ text text text | | |IMAGE| text text text | | +-----+ text text text | | text text text | +-------------------------+
This works fine, if the text is not wrapped. If the Text is wider than the viewport-width, it does not work anymore. I think this is caused by setting display: inline-block:
如果文本没有换行，这可以正常工作。如果文本比视口宽度宽，则不再起作用。我认为这是由设置 display: inline-block 引起的：
<a href="#">
<img style="display: inline-block; vertical-align: middle; margin-right: 8px;" src="images/arrow_black.png" />
<span style="display: inline-block; vertical-align: middle;">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonum eirmod tempor invidunt ut labore et dolore
</span>
</a>
The result:
结果：
+---------------------------------------------------------------------+ -- Viewport | | | +-----+ | | |IMAGE| text text text text text text text text text text text text | | +-----+ | | | +---------------------------------------------------------------------+ +-------------------------+ -- Viewport | +-----+ Text text text | | |IMAGE| text text text | | +-----+ text text text | | text text text text | +-------------------------+
If I try to float the elements, the image will always be on top, but not vertical-aligend in the middle of the text:
如果我尝试浮动元素，图像将始终位于顶部，但不会在文本中间垂直对齐：
<a href="#">
<img style="display: block; vertical-align: middle; margin-right: 8px; float: left;" src="/images/arrow_black.png" />
<span style="display: block; overflow: auto;">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</span>
</a>
The result:
结果：
+-------------------------+ -- Viewport | +-----+ Text text text | | |IMAGE| text text text | | +-----+ text text text | | text text text | | text text text | | text text text | +-------------------------+
I′ve seen several solutions for this problem, using html-tables or css-tables (display: table and display: table-cell), but this is not an option, because it must work with all types of browsers (desktop and mobile).
我已经看到了针对这个问题的几种解决方案，使用 html-tables 或 css-tables（显示：表格和显示：表格单元格），但这不是一个选项，因为它必须适用于所有类型的浏览器（桌面和移动） ）。
To that, I do not know any sizes. Neither of the image nor of the text. So I can't use any "margin- or padding-Solution".
对此，我不知道任何尺寸。无论是图像还是文字。所以我不能使用任何“边距或填充解决方案”。
EDIT: I′ve created a demo-fiddle(based on the one NGLN has created, BTW: Thanks for that!) that show the result i′m looking for. But I try to archive this without using display: table-cell... any ideas?
编辑：我创建了一个演示小提琴（基于 NGLN 创建的那个，顺便说一句：谢谢！）显示我正在寻找的结果。但是我尝试在不使用 display: table-cell ... 的情况下存档它……有什么想法吗？
回答by NGLN
Do you mean something like this demo fiddle?
你的意思是像这个演示小提琴吗？
HTML:
HTML：
<div id="viewport">
<a href="#">
<img src="images/arrow_black.png" alt="" />
<span>Lorem ipsum dolor...</span>
</a>
</div>
CSS:
CSS：
#viewport {
background: #bbb;
width: 350px;
padding: 5px;
position: relative;
}
#viewport img {
position: absolute;
top: 50%;
margin-top: -30px; /* = image height div 2 */
}
#viewport span {
margin-left: 68px; /* = image width + 8 */
display: block;
}
回答by Daniel Perez Malagon
This is a way that I'm not proud of, but it's the only way I know to archive this without js or flexbox.
这是一种我并不引以为豪的方式，但这是我知道的唯一一种无需 js 或 flexbox 即可存档的方式。
#viewport {
width: 350px;
padding: 5px;
position: relative;
}
#viewport a {
background: #bbb;
display: inline-block;
}
#viewport img {
display: block;
}
#viewport i,
#viewport span {
display:table-cell;
vertical-align:middle;
}
/* Using padding to add gutter
between the image and the text*/
#viewport span {
padding-left: 15px;
}<div id="viewport">
<a href="#">
<i><img src="//www.gravatar.com/avatar/be15533afe64a3939c5201a65a19d7ed/?default=&s=80" alt="" /></i>
<span>Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet.</span>
</a>
<a href="#">
<i><img src="//www.gravatar.com/avatar/be15533afe64a3939c5201a65a19d7ed/?default=&s=80" alt="" /></i>
<span>Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet.</span>
</a>
</div>This way no matter which element has more height, the text and the image will always be aligned to the middle.
这样无论哪个元素的高度更高，文本和图像将始终居中对齐。
回答by asteig
If you can estimate the ratio between the image width and text width I'd recommend setting a percentage width on the text span.
如果您可以估计图像宽度和文本宽度之间的比率，我建议在文本跨度上设置百分比宽度。
回答by rybo
You said you can't use margin/padding answers because of not knowing size. However, why not just use percentage to put the image halfway down, then split everything up into divs?
你说你不能使用边距/填充答案，因为不知道大小。但是，为什么不直接使用百分比将图像放在中间，然后将所有内容拆分为 div？
<div id="viewport">
<div id="image">
<img src="http://source..." />
</div>
<div id="text">
Whatever
</div>
</div>
And then in your CSS, do this:
然后在您的 CSS 中，执行以下操作：
#viewport {
width:800px;
height:500px;
border:1px solid #FFF;
}
#image {
width: 400px;
float:left;
height:100%;
text-align: center;
}
img {
margin-top:50%;
}
#text {
width:300px;
float:left;
}
Obviously all the widths and heights can be percentages or however you wish to handle them. However, this should render how you want it to. Hope I am understanding your question correctly.
显然，所有的宽度和高度都可以是百分比，或者您希望处理它们。但是，这应该呈现您想要的方式。希望我正确理解你的问题。
