Question

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

+-------------------------+ -- Viewport
|         Text text text  | 
| +-----+ text text text  | 
| |IMAGE| text 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），但这不是一个选项，因为它必须适用于所有类型的浏览器（桌面和移动）。

对此，我不知道任何尺寸。既不是图像也不是文本。所以我不能使用任何“margin-或padding-Solution”。

编辑：我已经创建了一个demo-fiddle（基于NGLN创建的一个，BTW：非常感谢！），它显示了我正在寻找的结果。但我尝试将其归档，而不使用display：table-cell ...任何想法？

Answer 1

您的意思是 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;    
}

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

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

垂直对齐图像和多行文本

4 个答案: