0

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

我想将任何未知高度的任何图像垂直居中到一个div中overflow:hidden

这就是我现在所拥有的：

.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被推到.outerby的中心padding-top，所以我得到一个 2 x 49px = 98px 高度的“窗口”。然后img我以为会从高度推出 50%，.inner但由于某种原因，我得到了不同的数字……</p>

有人知道我做错了什么吗？

先感谢您！

4

2 回答 2

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 标签，你可以试试这个

于 2013-03-27T14:17:26.920 回答
0

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

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

假设这个.innerdiv 内没有其他内容，您是否考虑过允许图像通过边距确定内部 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%;
}
于 2013-03-27T15:03:16.380 回答