Question

我知道有很多关于这个问题的帖子。读完所有这些之后，我觉得我很亲近，但它仍然不适合我。

HTML：

<div class="product">
  <div class="image">
    <a href="#">
        <img src="http://i.imgur.com/rthFtAb.jpg" />
    </a>
  </div>
</div>

CSS

.product {
    height:225px;
    min-height:225px;
    max-width:220px;
    background-color:#ff00ff;

}

.image {
    min-height:225px;
    display:table-cell;
    vertical-align:middle;
}

.image img {
    max-width:100%;
}

http://jsfiddle.net/SBqU5/

我在这里做错了什么？

Answer 1

垂直居中的六种方法。挑选你的毒药。你的方法属于＆＃34;表＆＃34;选项。

http://www.vanseodesign.com/css/vertical-centering/

行高

<div id="parent">
    <img src="image.png" alt="" />
</div>

#parent {
    line-height: 200px;
}

#parent img {
    vertical-align: middle;
}

表

<div id="parent">
    <div id="child">Content here</div>
</div>

#parent {display: table;}

#child {
    display: table-cell;
    vertical-align: middle;
}

负边距

<div id="parent">
    <div id="child">Content here</div>
</div>

#parent {position: relative;}

#child {
    position: absolute;
    top: 50%;
    left: 50%;
    height: 30%;
    width: 50%;
    margin: -15% 0 0 -25%;
}

拉伸

<div id="parent">
    <div id="child">Content here</div>
</div>

#parent {position: relative;}

#child {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 50%;
    height: 30%;
    margin: auto;
}

等填充

<div id="parent">
    <div id="child">Content here</div>
</div>

#parent {
    padding: 5% 0;
}

#child {
    padding: 10% 0;
}

Floater Div

<div id="parent">
    <div id="floater"></div>
    <div id="child">Content here</div>
</div>

#parent {height: 250px;}

#floater {
    float: left;
    height: 50%;
    width: 100%;
    margin-bottom: -50px;
}

#child {
    clear: both;
    height: 100px;
}

Answer 2

如果您使用display:table-cell;和max-width;，则父级应为display:table; table-layout:fixed和width:xxpx。的 DEMO

.product { height:225px; width:220px; background-color:#ff00ff; display:table; table-layout:fixed; } .image { display:table-cell; vertical-align:middle; } .image img { max-width:100%; }

Answer 3

如果您能够为图像定义宽度和高度，可以使用`position：absolute＆＃39;。

.image {
    position: relative;
    height: 100%;

}

.image img {
    width: 220px;
    height: 105px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -110px;
    margin-top: -52px;

}

DEMO

请注意，负的左边距和上边距分别是宽度和高度的一半。

垂直居中的图像

3 个答案: