Question

我认为这是一个经典的。我发现了很多类似的问题，但没有答案。

我希望将任何未知高度的任何图像垂直居中到overflow:hidden

的div中

这就是我现在所拥有的：

.outer {
    padding-top:49px;
    height:49px;
    width:280px;
    overflow:hidden;
    background-color:yellow;
}
.outer .inner {
    float:left;
    position:relative;
    display:block;
    background-color:blue;
}
.outer .inner img {
    position:relative;
    top:-50%;
    width:280px;
    height:auto;
    border:0px; 
    display:block; 
}

所以.inner被.outer推到了padding-top的中心，所以我得到一个2 x 49px = 98px高度的“窗口”。然后我认为img会从.inner高度推出50％，但出于某种原因，我会得到不同的数字......

有人知道我做错了吗？

提前谢谢！

Answer 1

我遇到了类似的情况，并用不同的方法解决了这个问题。为此，我使用图像作为div的背景图像。代码示例

<head>
    <style>
        div.imgbox1{
            width: 160px;
            height: 110px;
            overflow: hidden;
            background-position: 50% 50%; /* for vertical and horizontal center alignment*/
        }
    </style>
</head>

<body>
    <div class='imgbox1' style="background-image: url(http://photos-h.ak.fbcdn.net/hphotos-ak-snc6/399232_10151118743727680_899168759_a.jpg)" >
    </div>
</body>

如果不是必须使用img标签，可以试试这个

Answer 2

首先要做的事情......解释你为什么得到你得到的结果。这很简单。设置position: relative;（或绝对值），然后设置top: 50%;将图片的最顶部对齐到50％。如果您将图像的高度设置为1px，则可以看到1px居中。不幸的是，CSS没有办法让它与图像的中心对齐，而不是与上边缘对齐。

现在......一个可能的解决方案......

假设此.inner div内没有其他内容，您是否考虑过允许图像通过边距确定内部div的高度？

以此为JSFiddle。

你可以在.inner div中“居中”图像，方法是左右边距设置为自动，边距顶部和底部设置为某个px值......在我的示例中为60px。

如果你想获得600px的总div高度，并且你的图像总是400px高，那么100px的顶部和底部的边距使得总高度为600px。（400 + 100 + 100 = 600）。

HTML：

<div class="outer">
    <div class="inner">
        <img src="http://farm9.staticflickr.com/8311/8023199579_f52f648727_m.jpg">
    </div>
</div>

CSS：

.outer {
    height:520px;
    width:520px;
    overflow:hidden;
    background-color:yellow;
    border: 2px solid purple;
}
.outer .inner {
    width: 340px;
    display:block;
    background-color:blue;
    border: 1px solid red;
    padding: 10px;
    margin: 0 auto;
}
.outer .inner img {
    width:280px;
    height:auto;
    margin: 60px auto;
    border:0px; 
    display:block;
    border: 1px solid orange;
}

第二种可能的解决方案......

假设<img>标记无法保留<img>标记，那么执行此操作的一种非常简单的方法是将图像本身移动到CSS，作为background-image。

有关此解决方案的演示，请参阅此JSFiddle。

<强> HTML：

<div class="inner">
</div>

<强> CSS：

.inner {
    width: 540px;
    height: 340px;
    display:block;
    background-color:blue;
    border: 1px solid red;
    margin: 0 auto;
    background: blue url('http://farm9.staticflickr.com/8311/8023199579_f52f648727_m.jpg') no-repeat 50% 50%;
}

中心图像垂直于div，溢出隐藏

2 个答案: