Question

我正在尝试一些非常简单但我无法弄清楚如何制作的东西。

我有这样的html源代码：

<div class="product">
  <img src="product123.png" />
</div>`

还有一些css：

.product {
    width: 460px;
    height: 460px;
}

.product img {
      margin: auto;
      display: block;
}

我的图像水平对齐但不垂直。我尝试了一些position: relative; / bottom: 0;功能，但它没有改变任何东西......

任何想法的人？

感谢您的帮助！

PS：我找到了这个解决方案center <IMG/> inside a <DIV> with CSS，但我更愿意像这样保留我的HTML，似乎难以令人难以置信的是“我的”方式无法做到。

Answer 1

试试这个 - http://jsfiddle.net/tG9UK/

.product {
    width: 460px;
    height: 460px;

    display: table-cell;
    vertical-align: middle;
}

Answer 2

如果要垂直和水平居中，您应该能够将display：table-cell应用于div并使用vertical-align

.product {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    width: 460px;
    height: 460px;
}
.product img {
    margin: auto;
    display: block;
}

Answer 3

.product {
    width: 460px;
    height: 460px;
    line-height:460px;
    text-align:center;
}

http://jsfiddle.net/EHTeL/1/

Answer 4

如果图像尺寸是静态的，那么像这样的东西对你有用

.product img {
   position: absolute;
   top: 50%;
   left: 50%;
   width: 300px;
   height: 300px;
   margin-top: -150px; /* Half the height */
   margin-left: -150px; /* Half the width */
}

如何将一个img集中在一个div中

4 个答案: