如何在流体布局中垂直居中父div内的子div的内容 [英] How to vertically center content of child divs inside parent div in a fluid layout

问题描述

我有一个div，它包含两个子div，它们是流体布局的一部分，所以我不能在px中为它们设置固定的大小。

I have a div which contains two child divs, and they are intended to be part of fluid layout, so I can't set a fixed size for them in px.

这里有两个目标：

1. 水平对齐两个子div，使用 float：left 和 float：right 。

将文本（在子div中）相对于父div的中心。

Vertically center the text (within the child divs) relative to the parent div. The text is short and takes a single line by design.

我现在的状态： http://jsfiddle.net/yX3p9/

显然，两个孩子div不占用父div的完整高度，因此它们的文本不是相对于父div的垂直居中。

Apparently, the two child divs do not take the full height of the parent div, and therefore their text are not vertically centered relative to the parent div.

从概念上讲，为了实现上述目标，我们可以使子div在父div中垂直居中，或者我们可以使子div采用父div的完整高度。

Conceptually, to achieve the goals above, we can either make the child divs vertically centered within the parent div, or we can make the child divs take the full height of the parent div. What is the robust way to do so?

*浏览器支持：IE 9+和其他常用的现代浏览器。

*Browser support: IE 9+ and other usual modern browsers.

推荐答案

我更新了你的小提琴： http://jsfiddle.net/yX3p9/7/

I updated your fiddle: http://jsfiddle.net/yX3p9/7/

我使用 display：table-cell; align：middle;

I used display: table-cell; in order to use vertical-align: middle;

这篇关于如何在流体布局中垂直居中父div内的子div的内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！