CSS - 垂直居中浮动div中的图像

Question

CSS - 垂直居中浮动div中的图像

Hay*_*den 13 css center vertical-alignment

我决定放弃这个问题并需要一些帮助:).根据标题试图垂直对齐包裹在浮动固定高度div的中心的锚元素中的图像.

做了大量的谷歌搜索解决方案,当div没有浮动时,我可以得到的壁橱(但它需要).任何想法都将非常感激!

.class_name {
/*float: left*/
width:153px; 
height:153px;
margin:3px;
padding:4px;
border:1px solid #dedede;
text-align: center;
vertical-align: middle;
background-color: #000;
display: table-cell;
}

<div class="class_name">
    <a href=""><img src="image.jpg" alt="" /></a>
</div>

Run Code Online (Sandbox Code Playgroud)

Answer 1

Pau*_*aul 20

好吧,我昨晚碰到了同样的问题(对于类似画廊类型的东西),并在绊到这个页面后设法找到了解决方案.我很高兴地报告这似乎也适用于浮动元素!

诀窍基本上是给外部元素"display:table;"和内部元素(包含img)"display:table-cell;".

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html><head>
<style type="text/css">
.class_name {
    display: table;
    float: left;
    overflow: hidden;
    width: 153px; 
    height: 153px;
}

.class_name a {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}
</style>
</head>
<body>
    <div class="class_name">
         <a href=""><img src="image.jpg" alt="" /></a>
    </div>
</body>
</html>

Run Code Online (Sandbox Code Playgroud)

对于IE8,您需要处于标准模式.要使其在IE7中工作,还需要一些额外的定位:

<!--[if lte IE 7]><style type="text/css">
.class_name {
    position: relative;
}
.class_name a {
    position: absolute;
    top: 50%;
}
.class_name img {
    position: relative;
    top: -50%;
    width: 100%;
}
</style><![endif]-->

Run Code Online (Sandbox Code Playgroud)

Answer 2

mat*_*sta 0

如果高度固定并且您知道图像的大小，则只需手动定位图像即可。在图像或类似的东西上使用position:absolute;top:25px;，或为图像添加边距：margin:25px 0;。

归档时间：	15 年，2 月前
查看次数：	24622 次
最近记录：	13 年，8 月前