垂直对齐图片和多行文本

Question

垂直对齐图片和多行文本

30

我试图竖直对齐一张图片和一段文本：

+-------------------------+ -- 视口
|         文本 文本 文本  |
| +-----+ 文本 文本 文本  |
| | 图片  | 文本 文本 文本  |
| +-----+ 文本 文本 文本  |
|         文本 文本 文本  |
+-------------------------+

如果文本没有换行，这个方法可以正常工作。但是当文本宽度大于视口宽度时，就会出现问题。我认为这是由于设置了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>

结果如下：

+---------------------------------------------------------------------+ -- 视口
|                                                                     |                                                            
| +-----+                                                             | 
| |图片| 文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本 | 
| +-----+                                                             |                                                           
|                                                                     | 
+---------------------------------------------------------------------+
+-------------------------+ -- 视口
| +-----+ 文本文本文本文本  | 
| |图片| 文本文本文本文本  | 
| +-----+ 文本文本文本文本  | 
| 文本文本文本文本文本文本 | 
+-------------------------+

如果我尝试浮动这些元素，那么图片将始终在顶部，但不会垂直居中于文本中间：

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

结果如下：

+-------------------------+ -- 视口
| +-----+ 文字 文字 文字  | 
| |图片| 文字 文字 文字  | 
| +-----+ 文字 文字 文字  | 
|         文字 文字 文字  | 
|         文字 文字 文字  | 
|         文字 文字 文字  | 
+-------------------------+

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

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

编辑：我创建了一个演示fiddle（基于NGLN创建的），展示了我想要的结果。但我试图在不使用display: table-cell的情况下实现这一点... 有什么想法吗？

- bceo

哪些浏览器不支持HTML表格？ - Kraz

视口大小是否固定？图片大小是否固定？ - NGLN

@Kraz：我在某个地方读到，一些移动浏览器在显示“display: table-cell”时会出现问题。而且我不能使用HTML表格，因为还有其他限制，这些限制太复杂了，在这里无法完全讨论。 - bceo

@NGLN：视口大小不是固定的，也不是图像大小。顺便说一下：视口只是一个div容器，其宽度等于移动设备的显示宽度。 - bceo

4个回答

5

这是一种我不太自豪的方式，但这是我唯一知道的在没有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>

无论哪个元素高度更大，文本和图像始终都将对齐到中间。

- Daniel Perez Malagon

0

你说你不能使用margin/padding的答案是因为不知道大小。然而，为什么不只是使用百分比将图像放在中间，然后把一切拆分成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;
}

显然，所有的宽度和高度都可以是百分比或者你想要处理的方式。不过，这应该会呈现出你想要的效果。希望我正确理解了你的问题。

- rybo

我的问题是：我不知道视口的大小（它的宽度设置为100％-因此等于移动设备显示器的宽度），也不知道图像或文本的大小...如果我知道它们，我就不会有这样的问题 :) - bceo

我不确定我理解你的问题，但为什么不只是将视口保持在100％，将图像设置为40％，将文本设置为60％呢？ - rybo

因为视口大小可能会改变，我不想缩放图像。 - bceo

0

如果您能够估算图像宽度与文本宽度之间的比率，我建议在文本跨度上设置百分比宽度。

- asteig

1

我的问题是：我无法估计比例。图像将根据网站上下文而改变。有些图像比其他图像更宽。 - bceo

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- NGLN · Accepted Answer

你的意思是想要类似于这个演示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;    
}