Question

我已经浏览了几个帖子并访问过其他网站，但仍无法找到解决方案。我尝试了几个建议无济于事，从昨天起和今天我已经尝试了好几个小时来找到解决方案。所以，请原谅我，如果这个问题可能看起来重复，但事实是没有一个解决方案适合我。事实上，在重建整个页面之前，我会感谢来自这里的人的一些帮助。我的老板＆＃34;简单地说＃34;想看到图标适合盒子的中间位置。由于框内没有文字，因此垂直对齐：中间;不适用。图像可以有不同的尺寸，所以我不能指望一个固定的尺寸来定位它。

由于

img {
    max-width: 100%;
    max-height: 100%;
}
.imageHolder {
    margin: 2px 10px;
    padding: 5px;
    border: 1px solid #999;
    background-color: white;  
    display: inline-block;  
    vertical-align: middle;
}
#contenido .logo-radio .imageHolder {
    width: 72px;
    height: 72px;  
}

<div class="logo-radio">
    <article class="imageHolder">
        <a href="#"><img src="#" alt="Logo AM 750"></a>
    </article>
</div>

Fiddle

Answer 1

我找到了解决方案。这是代码：

.imageHolder {
    text-decoration: none;
    display: inline-block;
    height: 72px;
    width: 72px;
    overflow: hidden;
    position: relative;
    border: 1px solid silver;
    vertical-align: middle;
    margin: 5px;
    padding: 3px;
}

.imageHolder img {
    max-width: 100%;
    max-height: 100%;
    margin: auto;
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

我创建了一个jsfiddle来展示它：

Answer 2

我已经通过以下两种方式之一看到了这一点：

将其设为背景图片：

a{
 display: block;
 width: 100%;
 height: 100%;
 background: url(yourimage.jpg) center no-repeat;
 background-size: 100%;
}

绝对定位：

.imageHolder {
 margin: 2px 10px;
 padding: 5px;
 border: 1px solid #999;
 background-color: white;  
 display: inline-block;  
 vertical-align: middle;
 position: relative;
}
#contenido .logo-radio .imageHolder {
 width: 72px;
 height: 72px;  
 position: absolute;
 top: 50%;
}
#contenido .logo-radio .imageHolder a{ 
 position: absolute;
 top: 50%;
}
img {
 max-width: 100%;
 max-height: 100%;
 position: relative;
 top: -50%;
}

Answer 3

<div class="logo-radio" align="center">

CSS：对齐框中间中心任意大小的图像图标

3 个答案: