等高柱，定义纵横比和垂直居中内容？

<div class="cont"> 
    <div class="item item-first"> 
    <p>First</p> 
    </div> 
    <div class="item item-second"> 
    <p>Second Second Second Second Second Second Second Second Second Second Second Second Second Second Second Second Second </p> 
    </div> 
    <div class="item item-third"> 
    <p>Third</p> 
    </div> 
</div> 

* { 
    box-sizing: border-box; 
} 
.cont { 
    width: 70%; 
    display: table; 
} 
.item { 
    display: table-cell; 
    vertical-align: middle; 
    text-align: center; 
    padding: 20px; 
    width: 33%; 
} 
.item-first { 
    background: blue; 
} 
.item-second { 
    background: green; 
} 
.item-third { 
    background: blue; 
}

这是伟大的工作。不过，我还需要我的列具有16x9的宽高比。在极少数情况下，会有很多内容，在这种情况下，它可以改变比例。

Ive得到了下面这样但它停止工作内容被垂直居中：

http://codepen.io/anon/pen/pbyWMj

* { 
    box-siing: border-box; 
} 
.cont { 
    width: 70%; 
    display: table; 
} 
.item { 
    display: table-cell; 
    vertical-align: middle; 
    text-align: center; 
    padding: 20px; 
    width: 33%; 
} 
.item:before { 
    padding-bottom: 56.25%; // 16:9 ratio 
    display: block; 
    content: ''; 
    float: left; 
    width: 1px; 
} 
.item-first { 
    background: blue; 
} 
.item-second { 
    background: green; 
} 
.item-third { 
    background: blue; 
}

我可以看到，这是由于填充黑客发生。有没有办法让高度相等的列，垂直居中的内容和16x9的宽高比？

我支持IE9。理想情况下，它看起来是一样的，但可用的回退也是可以接受的。

来源

2016-06-13 Evans

您可以在每个项目内的元素上使用inline-block和vertical-align。试试这个：

.item { 
    display:table-cell; 
    vertical-align:middle; 
    text-align: center; 
    width: 33%; 
} 
.item:before { 
    padding-bottom: 56.25%; 
    display: inline-block; 
    content: ''; 
    width: 0; 
    vertical-align:middle; 
    margin-right:-4px; 
} 
.item p { 
    display:inline-block; 
    vertical-align:middle; 
    padding:20px; 
}

Codepen Update

来源

2016-06-13 16:42:47 DaniP

等高柱，定义纵横比和垂直居中内容？

回答

相关问题