垂直对齐图像和多行文本 [英] Vertical align an image and a multiline text
问题描述
我试图垂直对齐图片和文字：
+ ----------- -------------- + - Viewport
|文本文本文本|
| + ----- + text text text |
| | IMAGE |文本文本文本|
| + ----- + text text text |
|文本文本文本|
+ ------------------------- +
如果文字未封装，这会正常工作。如果文本宽度大于viewport-width，它不再工作。我认为这是由设置显示引起的：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>
结果：
+ ------------------------------------- -------------------------------- + - Viewport
| |
| + ----- + |
| | IMAGE |文本文本文本文本文本文本文本文本文本文本文本文本文本|
| + ----- + |
| |
+ --------------------------------------------- ------------------------ +
+ ---------------- --------- + - Viewport
| + ----- +文本文本文本|
| | IMAGE |文本文本文本|
| + ----- + text text text |
|文本文本文本文本|
+ ------------------------- +
如果我尝试浮动元素，图片将始终在顶部，但不是垂直 - 在中间的aligend的文字：$ b $bÚ
< 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。在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。在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>
结果：
+ ------------------------- + - 视口
| + ----- +文本文本文本|
| | IMAGE |文本文本文本|
| + ----- + text text text |
|文本文本文本|
|文本文本文本|
|文本文本文本|
+ ------------------------- +
我已经看到这个问题的几个解决方案，使用html表或css表（显示：表和显示：表单元格），但这不是一个选项，因为它必须与所有类型的浏览器桌面和移动）。
为此，我不知道任何尺寸。既不是图像也不是文本。所以我不能使用任何边距或填充解决方案。
我希望有人了解我的问题（BTW：对不起我的英语），可以帮助我.. 。
EDIT ：我创建了一个 demo-fiddle （基于NGLN创建的一个，BTW：谢谢！），显示我想要的结果。但我尝试归档这个不使用display：table-cell ... any Ideas？
strong> 此演示程序 ？
HTML：
< div id =viewport>
< a href =＃>
< img src =images / arrow_black.pngalt =/>
< span> Lorem ipsum dolor ...< / span>
< / a>
< / div>
CSS：
code> #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;
}
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:
<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).
To that, i do not know any sizes. Neither of the image nor of the text. So i cant use any "margin- or padding-Solution".
I hope someone understand my problem (BTW: sorry for my bad english) and can help me... ?
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?
Do you mean something like this demo fiddle?
HTML:
<div id="viewport">
<a href="#">
<img src="images/arrow_black.png" alt="" />
<span>Lorem ipsum dolor...</span>
</a>
</div>
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;
}
这篇关于垂直对齐图像和多行文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
