棘手的垂直对齐中心与css

Question

我发现了关于如何使用 css 垂直对齐内容的不同建议。但是，这些都无法处理我想要的。这是我想要的：

一般来说，我有一些文本应该填满一些空间的左半部分，而一张图片应该填满空间的右半部分。

如果文字的高度小于图片，则文字和图片都应在空间顶部垂直对齐：

TextTextText   PicturePicture
TextTextText   PicturePicture
               PicturePicture

如果文字的高度大于图片的高度，则文字应垂直对齐顶部，图片相对于文字居中。

TextTextText
TextTextText   PicturePicture
TextTextText   PicturePicture
TextTextText   PicturePicture
TextTextText

这是我尝试的一种直接方式（没有图片的文本版本）：

<div style="width: 100%">
  <div style="width: 50%; display: inline-block; vertical-align: top;">
    TextTextText <br>
    TextTextText <br>
    TextTextText
  </div><div style="width: 50%; display: inline-block; vertical-align: middle;">
    PicturePicture <br>
    PicturePicture
  </div>
</div>

但是，没有达到我想要的效果。右边的内部 div（图片）只是在顶部而不是相对于文本的中间对齐。设置vertical-align: middle 和vertical-align: top 没有区别。然而，有趣的是，设置 vertical-align: bottom 会有所不同。

外部 div 包含在某个宽度的其他元素中。但是，我不能通过任何固定的度量来指定这个宽度，例如像素。相同宽度的两个内部 div 相同。

使内部 divs 表格单元格达到正确的垂直效果。但是，我不能使用display: table-cell，因为我需要确保左侧内部 div 保持其宽度，即使右侧内部 div 的内容可能会向右溢出，例如PicturePicturePicturePicturePicture...。这会导致左侧单元格的宽度缩小，这是我不想要的。

此外，我不知道内容的高度，因此使用固定高度的垂直对齐技巧都不起作用。

这似乎不是一个太罕见的任务，但我找不到任何解决方案。可以这样做吗？

Answer 1

我不清楚当图片对于右内div来说太宽时你想要什么行为，除了它不应该影响左内div的宽度，但这符合你的要求吗？

HTML。

<div class="container">
  <div class="caption cell">
    Text Text Text <br/>
    Text Text Text <br/>
    Text Text Text <br/>
    Text Text Text <br/>
    Text Text Text <br/>
    Text Text Text
  </div>

  <div class="picture cell">
    <div>
      <img src="http://placehold.it/500x50" />
    </div>
  </div>
</div>

CSS

.container {display:table; table-layout: fixed; width:100%; }
.cell { display: table-cell; width:50%; }
.caption { vertical-align: top; }
.picture { vertical-align: middle; }
.picture div { overflow-x:hidden; }

JSFiddle http://jsfiddle.net/92wcy/1/

Answer 2

如果您不希望左列缩小，请添加min-width。

http://jsfiddle.net/pUbWt/1/

.container {
  display: table;
  width: 100%;
}

.container .caption, .container .picture {
  display: table-cell;
}

.container .caption {
  vertical-align: top;
  min-width: 10em;
}

.container .picture {
  vertical-align: middle;
}

Flexbox 也可以，但在生产站点中开始使用还为时过早。

Answer 3

垂直对齐总是很棘手，因为 CSS 并不是为了实现这一点而设计的。
不过，这就是你所追求的吗？ http://jsfiddle.net/N7px2/

如果是这样，请继续阅读。
首先，我删除了您的内联样式，因为这是不好的做法。只需在 HTML 的头部使用 <style>...</style>，甚至更好：使用外部 CSS 文件。

然后，我浮动您的 div #b 和 #c 以使它们像您的示例一样对齐。请参阅 background-color 和 border 以快速了解每个元素的放置位置。
因为浮动让父元素崩溃，所以我使用了 clearfix 来解决这个问题。阅读更多关于 here 的信息。

现在垂直对齐：我将图像定位在#c 绝对位置并给它一个边距top: 50%。显然，这将图像推得太多了，但这就是它的工作原理。之后，我应用了一个否定的margin-top: -25% 将图像拉回原位。请注意，这只适用于父元素是相对定位的。 浏览器对负边距的支持非常好，只要它们不用于修复错误的布局，就可以使用它们。

另一个注意事项：因为position: absolute 将一个元素从流中取出，#c 会崩溃。如果你想给 #c 一个 background-image 或类似的东西，你需要更多的标记来解决这个问题 - 只需添加另一个 div。

希望对您有所帮助！

编辑：抱歉，我刚刚意识到这段代码并不是我所相信的那样。