垂直对齐图像和多行文本

Posted 2023-02-21

【中文标题】垂直对齐图像和多行文本

【英文标题】：Vertical align an image and a multiline text

【发布时间】：2011-09-25 07:49:16

【问题描述】：

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

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

如果文本没有被换行，这可以正常工作。如果文本比视口宽度宽，它就不再起作用了。我认为这是由于设置 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-tables 或 css-tables (display: table and display: table-cell)，但这不是一个选项，因为它必须适用于所有类型的浏览器 (桌面和移动）。

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

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

【问题讨论】：

什么浏览器不支持html-tables？

视口大小是否固定？图片是固定大小的吗？

@Kraz：在某处我读到一些移动浏览器在显示方面存在问题：table-cell。而且我不能使用 html-tables，因为有一些其他的限制，在这里详细讨论这些限制很复杂。

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

【参考方案1】：

你的意思是像 this demo fiddle 这样的东西吗？

HTML：

<div id="viewport">
    <a href="#">
        <img src="images/arrow_black.png"  />
        <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;    

【讨论】：

这里唯一的问题是他们说他们不知道图像或文本的大小：/

是的，我的意思是这样。但是 - 正如 Max 所提到的 - 我不知道图像和文本的大小......视口宽度将是身体的 100%（更准确地说，它将等于移动设备的宽度）跨度>

@NGLN 当您知道图像的确切大小时，这可能会很有用：）谢谢。

【参考方案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"  /></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"  /></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>

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

【参考方案3】：

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

【讨论】：

我的问题：我无法估计这个比率。图像将根据站点上下文发生变化。有些图片比其他图片宽。

【参考方案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;

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

【讨论】：

我的问题：我不知道视口的大小（它的宽度设置为 100% - 所以它等于移动设备显示的宽度）也不知道图像和文本的大小...如果我认识他们，我就不会有这样的问题:)

我不确定我是否理解您的问题，但为什么不将视口设置为 100%，例如将图像设置为 40%，将文本设置为 60%？

因为视口大小可以改变，我不想缩放图像。