Html 在div中对中图像

我有一个正方形

（

70px

x

70px

），它将包含一个可变尺寸（正方形、横向或横向）的图像。我希望此图像在

内对称居中。我怎么得到它

<div class="img-polaroid" style="width: 70px; height: 70px; background-color: black; text-align:center;">
    <image src='.base_url("images/store/images/".$image->image).'  />
</div>

图像的实际大小可以大于

70px

x

70px

。但它应该对称地安装在中心。

我还必须使其跨浏览器兼容。。 感谢帮助…

它必须是

元素吗

您可以使用

背景位置：center-center

将图像设置为

的背景-这非常容易，不需要使用javascript和跨浏览器

像这样使用它：

<div class="img-polaroid" style="width: 70px; height: 70px; background:url('.base_url("images/store/images/".$image->image).') center center no-repeat black; text-align:center;"></div>

div {
  width: 70px;
  height: 70px;
  text-align: center;
  border: 1px solid green;
}
div:after {
  content:"";
  display: inline-block;
  width:0;
  height: 100%;
  vertical-align: middle;
}
img {
  vertical-align: middle;
}

看看这个。在浏览器支持方面，我从未遇到过不支持此功能的浏览器

它肯定会在以下方面发挥作用：

• 网景6+
• Mozilla 1+
• 火狐1+
• Internet Explorer 4+
• 歌剧3+
• 狩猎1+

---

这是您在CSS中居中的终极指南>

下面是一个正在工作的JSFIDLE：

---

这将为你带来好处

.img-polaroid img{display:block; margin:0 auto;}

---

使用

显示：表格单元格与
文本对齐：居中和
垂直对齐：中间

代码如下：

<div class="img-polaroid" style="width: 70px; height: 70px; background-color: black; border: 1px solid yellow; text-align:center; vertical-align: middle; display: table-cell;">
    <image src="http://www.gelifesciences.com/gehcls_images/GELS/Link%20Images/Product%20Link%20Images/ImageScanner%20III%2050x50.jpg" />
</div>



下面是一个例子：

在这里，您可以找到有关兼容性问题的更多信息：



应该是

<div class="img-polaroid" style="width: 70px; height: 70px; background-color: black;display:table-cell;vertical-align:middle;text-align:center;">

 <image src='.base_url("images/store/images/".$image->image).'  />
</div>



添加显示：表格单元格；垂直对齐：中间对齐
 垂直/水平对齐非常简单

首先构建一个holder div：

.holder {
display: table;

}

然后构建一个容器div：

.container {
display: table-cell;
vertical-align: middle;
text-align: center
}

在您的容器中，它将显示所有居中的内容。
我还没有测试它。。但是，它应该起作用；p

<div class="holder">
     <div class="container">
          <img src="YOURIMAGE" />
     </div>
</div>


很简单：）

选中fiddle
您可以将display:inline块和：after用于div，如下所示：

<div class="img-polaroid" style="width: 70px; height: 70px; background:url('.base_url("images/store/images/".$image->image).') center center no-repeat black; text-align:center;"></div>

div {
  width: 70px;
  height: 70px;
  text-align: center;
  border: 1px solid green;
}
div:after {
  content:"";
  display: inline-block;
  width:0;
  height: 100%;
  vertical-align: middle;
}
img {
  vertical-align: middle;
}

请查看。单击，您可以查看其他解决方案。
给定代码的实现方式？？stackoverflow中详细讨论了这一点。我找到的唯一可靠的方法是使用javascript。对于简单的案例，表格可以很好地工作。是的，通过组合两个项目，你就有了答案。你的图像尺寸是多少。。。如果它有固定的高度和宽度，u可以将其与css对齐。。与边距0类似，自动播放一点上边距并将其对齐中心。这可能会帮助你。。。自动垂直对齐中心是不可能的，你需要稍微调整一下边距。他写道，可以有3种不同的尺寸：“可变尺寸（正方形、水平矩形或垂直矩形）”，看看JSFIDLE，图像应该居中，而不考虑容器的位置。还需要给出
背景尺寸：contain。。。这将使它非常适合图像…我想缩略图的大小将是正确的。。如果不是的话，你显然是对的。我不能给这张照片任何尺寸。。。因为图像将被渲染，并且可以是任意尺寸。。我必须用它原来的纵横比来表示。如果你不这样做，就没有问题了。我刚刚在这里使用了它们，因为我放了一张大图。更新了我的答案。我选了一张照片。
div {
  width: 70px;
  height: 70px;
  text-align: center;
  border: 1px solid green;
}
div:after {
  content:"";
  display: inline-block;
  width:0;
  height: 100%;
  vertical-align: middle;
}
img {
  vertical-align: middle;
}