Question

我有以下jsfiddle我试图让黑盒子里面的猫的照片在中间和中间完美对齐，这样如果它不完美地适合图像周围有黑色边框在容器内。我使用line-height:100px和vertical-align:middle text-align:middle尝试了一些不同的方法，但似乎都没有。

Answer 1

在这些场景中，当包含元素的宽度/高度已知时，我使用position absolute和margin auto。给包含元素相对位置并使图像绝对。 margin: auto将强制图像显示在绝对中心。

.photoContainer img {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

查看小提琴http://jsfiddle.net/Pv8uN/1/

Answer 2

或者如果你不想绝对定位，试试这个：

.content{
    display:inline-block;
    width:750px;
    margin-top:10px;
    margin-bottom:10px;
    height:auto;
    background-color:orange;
}

.photoContainer {
    width:200px;
    height:200px;
    background-color:#000000;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

.content img {
    max-width:200px;
    max-height:200px;
    vertical-align: middle;
}

看小提琴：http://jsfiddle.net/aAMJS/

Answer 3

没有绝对定位。

查看此Working Fiddle

将text-align: center;添加到.photoContainer

.photoContainer:before
{
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    margin-left: -5px;
}

并将vertical-align: middle;添加到.photoContainer img

将图片对齐到垂直中间和水平中心

3 个答案: