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包含在某个宽度的其他元素中。但是，我不能通过任何固定的措施来指定这个宽度，例如PX。两个内部div具有相同的宽度。

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

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

这似乎不是一个非常罕见的任务，但我无法找到任何解决方案。有可能这样做吗？

Answer 1

如果您不希望左列缩小，请向其添加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 2

垂直对齐总是很棘手，因为没有用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。

希望以任何方式帮助你！

编辑：对不起，我刚才意识到这段代码并不完全是我所相信的。

Answer 3

我不清楚当图片对于正确的内部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/

棘手的垂直对齐中心与CSS

3 个答案: