使用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包含在某个宽度的其他元素中。但是，我不能通过任何固定的测量来指定这个宽度，例如px。对于宽度相等的两个内部div也是如此。

使内部div表格单元格达到正确的竖直效果。但是，我不能使用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; }

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

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以快速了解每个元素的放置位置。

因为浮点数允许父元素折叠，所以我使用了一个清晰的修复程序来解决这个问题。请阅读有关该here的更多信息。

现在垂直对齐:我将图像定位在#c absolute中，并给它一个边距top: 50%。显然，这对图像的推动太大了，但这就是它的工作方式。在那之后，我应用了负margin-top: -25%来将图像拉回原位。请注意，这只有在父元素是相对定位的情况下才有效。浏览器对负边距的支持真的很好，只要它们不是用来修复糟糕的布局，就可以使用它们。

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

希望这对你有任何帮助！

编辑:对不起，我刚刚意识到这段代码并不完全是你在我相信之后的样子。