Question

我需要垂直居中图像，我不知道它的尺寸是否提前所以我真正唯一的选择就是使用tables或css tables我相信。

我以为我会给css表一个去，但我仍然无法将图像垂直居中。

我的HTML：

<div class="image">
    <div class="table">
        <div class="table_row">
            <div class="table_cell">
                <img src="https://pbs.twimg.com/profile_images/3560817062/a9bda79c4d2bfc3353a4fbc0a14e6080.jpeg" alt="Main Image">
            </div>
        </div>
    </div>
</div>

CSS：

.table {
    display: table;
    margin: 0px auto;
}

.table_row {
    display: table-row;
}

.table_cell {
    display: table-cell;
    vertical-align: middle;
}

.image {
    width: 411px;
    min-width: 411px;
    max-width: 411px;
    height: 341px;
    min-height: 341px;
    max-height: 341px;
    background-color: #f6f6f6;
}

.image img {

}

小提琴：http://jsfiddle.net/5DLuU/

我在这里做错了什么？

Answer 1

首先，您不需要{-1}}表格行，只能使用<div>，以解决对齐问题，为表格和表格分配table-cell -cell：

height:100%

选中 Demo Fiddle

Answer 2

您可以使用行高和垂直中心，如：

HTML：

<div class="image">
    <img src="https://pbs.twimg.com/profile_images/3560817062/a9bda79c4d2bfc3353a4fbc0a14e6080.jpeg" alt="Main Image"/>
</div>

CSS：

.image
{
    background-color: #f6f6f6;
    width:400px;
    height:400px;
    line-height:400px;
    text-align:center;
}

.image img
{
    vertical-align:middle;
}

Answer 3

问题是，你的桌子没有足够的高度来覆盖外部div。你可以给它一个特定的高度。

.table {
    display: table;
    margin: 0px auto;
    height:350px;

}

无法垂直居中动态图像

3 个答案: