垂直对齐块元素到图像？答案

【问题标题】：Vertically aligning block element to image?垂直对齐块元素到图像？
【发布时间】：2023-10-23 18:15:02
【问题描述】：

我正在寻找一种将块元素垂直对齐到图像的方法。在我的网站上，此图像的高度和宽度会动态变化，因此我需要垂直对齐以适应图像大小。例如：

<img src="photo.jpg" alt="test" />
<div id="box">
</div>

img { float: left; }

#box { float: right; width: 200px; height: 150px; background-color: #666; }

所以我希望这个 div 与图像垂直对齐。如何才能做到这一点？谢谢。

【问题讨论】：

垂直对齐如何？居中？最佳？底部？
是的，居中。抱歉，如果我最初没有传达这一点。

标签： css image alignment block

【解决方案1】：

诀窍是添加几层 wrapper-div。第一层设置为white-space: nowrap和max-width:50%，这意味着里面的元素不能换行，并且被限制为父元素宽度的50%。

然后你将空白设置回正常，并制作第二层display:inline-block，以便这些div必须按照文本对齐规则播放。然后将它们中的 both 设置为 vertical-align:middle; 只有一个不起作用，因为垂直对齐相对于文本的 baseline，而不是包含块元素。

因此，通过这种方式，我们将自己限制为一行“文本”，由两个 div 元素组成，它们都对齐，使得它们的中间位于文本基线，并确保它们的大小不得超过父元素的 50%容器。

编辑：玩了一会儿后我发现你需要添加一些 max-width:100% 以防止图像将文本推出右侧。

编辑 2： 我应该提到这需要 IE-8 标准模式，添加了 meta-equiv 以告诉 IE-8 自行运行，但要提供正确的文档类型或发送 http 响应标头可以为所有这些东西实现相同的谷歌 IE8 标准模式。

<html >  
  <head>  
    <title>Test</title>  
    <meta http-equiv="X-UA-Compatible" content="IE=8" />
    <style type="text/css">
      .wrapper1 {
        white-space:nowrap;
        max-width:50%;
      }
      .wrapper2 {
        white-space:normal;
        display:inline-block;
        vertical-align:middle;
        max-width:100%;
      }
      .variable-img {
        max-width:100%;
      }
    </style>
  </head>  
  <body>  
  <div class="wrapper1">
    <div class="wrapper2">
      <img class="variable-img" src="test.png">
    </div>
    <div class="wrapper2">
      <div id="box">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
        sed do eiusmod tempor incididunt ut labore et dolore magna 
        aliqua. Ut enim ad minim veniam, quis nostrud exercitation 
        ullamco laboris nisi ut aliquip ex ea commodo consequat. 
        Duis aute irure dolor in reprehenderit in voluptate velit 
        esse cillum dolore eu fugiat nulla pariatur. Excepteur sint 
        occaecat cupidatat non proident, sunt in culpa qui officia 
        deserunt mollit anim id est laborum</div>
      </div>
    </div>
  </body>  
</html>

【讨论】：

如果它解决了您的问题，请将其标记为正确答案。（这样做你将获得+2 声望）。如果您特别满意，您也可以投票。