display:table-cell以两个元素为中心,而不是三个

时间:2012-12-17 10:59:49

标签: css vertical-alignment

我有一个使用三个元素垂直居中未知高度元素的工作示例:

<section>
    <div>
        <img src="http://placehold.it/100x100"/>
    </div>
</section>​

CSS:

section {
  display: table;
  width: 100%;
  height: 100%;
  position: absolute;
  text-align: center;
}

div {
  display: table-cell;
  vertical-align: middle;
}

这里还有一个JSFiddle示例:http://jsfiddle.net/Y6KS9/

但是我想尽可能避免使用不必要的包装器。例如,将img本身显示为table-cell:

div {
  display: table;
  width: 100%;
  height: 100%;
  position: absolute;
  text-align: center;
}

img {
  display: table-cell;
  vertical-align: middle;
}
​

然而这不起作用 - 请参阅http://jsfiddle.net/U2c9R/处的JSFiddle示例 - img不在div中居中。

是否可以仅使用两个元素在其父级中垂直居中未知大小的图像?

编辑:我知道Flexbox,并且打算在IE9死后完全抛弃表格单元。但是现在我需要支持旧的浏览器。

1 个答案:

答案 0 :(得分:1)

您可以尝试使用CSS3 Flexible Box Model

您应该检查浏览器的可用性。正如您可以通过-webkit供应商前缀看到的,我的示例目前仅适用于基于-webkit的渲染引擎。但我很确定它在大多数现代浏览器中都能正常工作。

以下是支持Flexible Box模型的浏览器概述:http://caniuse.com/#feat=flexbox

div {
    display: -webkit-box;
    -webkit-box-pack: center;
    -webkit-box-align: center;
    height:100%;
    width:100%;
    position:absolute;
}

示例http://jsfiddle.net/U2c9R/4/

更新

对于CSS3灵活盒模型的跨浏览器支持,您可以使用Modernizr和正确的Polyfill,这会增加对IE 6-9Opera 10.0+的支持。唯一的提示是,没有JavaScript,这是行不通的。但也许这是一个选择?