Question

我试图将一个图像居中放在一个div中，该div按照进行缩放，并且总是正方形。

由于令人敬畏的CSS-only option here，我已经将 always-square 部分工作了。

CSS：

.thumbnail_container {
    position: relative;
    width: 25%;
    padding-bottom: 25%;
    float:left;
}

.thumbnail {
    position:absolute;
    width:100%;
    height:100%;
    text-align:center;
}

HTML：

<div class="thumbnail_container vcenter-ext">
  <div class="thumbnail vcenter-int">
      <img src="http://placehold.it/200x300" />
  </div>
</div>

div中的v-align通常很简单：

.vcenter-ext { display: table;}
.center-int { display: table-cell; vertical-align: middle;}

但最后，我似乎无法一起使用它们......任何人都可以指出我的问题吗？！

Answer 1

要解决您的问题，您必须删除display: table;和display: table-cell; vertical-align: middle;，并且必须添加此内容：

.thumbnail img {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

垂直居中图像。 This article解释了我使用的方法（绝对定位和拉伸）。

注意：我的代码正常运行，因为.thumbnail代码的父代img具有position: absolute属性。

您可以查看this fiddle以查看结果。

Answer 2

这样的东西？

HTML：

<div>
<img src="http://placehold.it/200x300" />

的CSS：

body{margin:0px auto;padding:0;text-align:center;}
div{padding:80px;width:25%;margin:0px auto;background:green;}
img{width:80%;margin:0px auto;padding:0;}

http://jsfiddle.net/8Fjsd/

此外：

vcenter-int不存在

响应方形div内的垂直中心图像

2 个答案: