垂直对齐图像和多行文本

Question

我正在尝试垂直对齐图像和文本：

+-------------------------+ -- Viewport
|         Text text text  | 
| +-----+ text text text  | 
| |IMAGE| text text text  | 
| +-----+ text text text  | 
|         text text text  | 
+-------------------------+ 

如果文本未换行，则效果很好。如果文本比视口宽度宽，则它不再起作用。我认为这是由于设置 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>

结果：

+---------------------------------------------------------------------+ -- 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     | 
+-------------------------+ 

如果我尝试浮动元素，图像将始终位于顶部，但不会在文本中间垂直对齐：

    <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>

结果：

+-------------------------+ -- Viewport
| +-----+ Text text text  | 
| |IMAGE| text text text  | 
| +-----+ text text text  | 
|         text text text  | 
|         text text text  | 
|         text text text  | 
+-------------------------+ 

我已经看到了这个问题的几种解决方案，使用 html-tables 或 css-tables （display: table 和 display: table-cell），但这不是一个选项，因为它必须适用于所有类型的浏览器（桌面和移动）。

对此，我不知道任何尺寸。无论是图像还是文字。所以我不能使用任何“边距或填充解决方案”。

编辑：我创建了一个演示小提琴（基于NGLN 已经创建了，顺便说一句：谢谢你！），它显示了我正在寻找的结果。但我尝试在不使用 display: table-cell 的情况下存档此内容...有什么想法吗？

Answer 1

您的意思是像这个演示小提琴之类的东西吗？

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;    
}

Answer 2

这是一种我并不引以为豪的方式，但这是我知道的在没有 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>

这样无论哪个元素的高度更高，文本和图像将始终居中对齐。

Answer 3

如果您可以估计图像宽度和文本宽度之间的比率，我建议在文本跨度上设置百分比宽度。

Answer 4

你说你不能使用边距/填充答案，因为不知道大小。但是，为什么不直接使用百分比将图像放在中间，然后将所有内容分割成 div 呢？

<div id="viewport">
    <div id="image">
        <img src="http://source..." />
    </div>
    <div id="text">
        Whatever
    </div>
</div>

然后在 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;
}

显然，所有宽度和高度都可以是百分比，或者您希望如何处理它们。但是，这应该按照您想要的方式呈现。希望我正确理解你的问题。