在 div 中居中图像答案

【问题标题】：centering image in div在 div 中居中图像
【发布时间】：2013-06-26 02:03:24
【问题描述】：

我有一个正方形 <div> (70px x 70px)，其中包含可变尺寸（正方形、横向或纵向）的图像。我希望这张图片在<div> 内对称居中。我怎么得到它..？

<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。但它应该对称地放在中心。

我还必须让它跨浏览器兼容.. 帮助感谢...

【问题讨论】：

给定代码的结果如何？？
这在stackoverflow中有详细讨论。我发现唯一可靠的方法是使用 javascript。对于简单的情况，表格效果很好。

标签： html css cross-browser position center

【解决方案1】：

必须是<img> 元素吗？

您可以使用background-position:center center 将图像设置为<div> 的背景 - 这很容易做到，无需使用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>

检查此Working jsFiddle。在浏览器支持方面，我从未遇到过不支持此功能的浏览器。

它肯定会起作用：

网景6+
Mozilla 1+
火狐1+
Internet Explorer 4+
Opera 3+
Safari 1+

【讨论】：

看看 jsFiddle 图像应该居中而不考虑容器的位置。
还需要给background-size:contain;...这将使它完美地适用于图像......
我认为缩略图的大小是正确的。如果不是，你显然是对的。

【解决方案2】：

这对你有用

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

【讨论】：

您的图像尺寸是多少...如果它具有固定的高度和宽度，您可以将其与 css 对齐。就像使用边距 0 自动并使用顶部边距播放一点并将其居中对齐。这可能会对您有所帮助...无法自动垂直对齐中心，您将不得不稍微调整一下边距。
他写道可以有 3 种不同的尺寸：“可变尺寸（正方形、水平矩形或垂直矩形）”

【解决方案3】：

<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>

应该是

<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>

添加显示：表格单元格；垂直对齐：中间；

【讨论】：

【解决方案4】：

将display: table-cell; 与text-align: center; 和vertical-align: middle; 一起用于您的div

下面是代码：

<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>

示例如下：http://jsfiddle.net/eUGb6/

您可以在此处找到有关兼容性问题的更多信息：

vertical-align text-align display

【讨论】：

我无法为图像提供任何尺寸...因为图像将被渲染并且它可以是任何尺寸..我必须以其原始纵横比显示它。
不这样做也没问题。我只是在这里使用它们，因为我放了一张大图。
更新了我的答案。我选择了一张更小的图片。

【解决方案5】：

垂直/水平对齐非常简单。

首先构建一个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>

【讨论】：

【解决方案6】：

很简单:)

.img-polaroid {
    display:table-cell;
    vertical-align: middle

    }

检查小提琴http://jsfiddle.net/9hppL/2/

【讨论】：

【解决方案7】：

你可以使用 display:inline-block 和 :after 作为 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;
}

请查看demo。点击here，可以查看其他解决方案。

【讨论】：

【解决方案8】：

这是您在 CSS 中居中的终极指南> http://www.w3.org/Style/Examples/007/center

这是一个有效的 jsfiddle：http://jsfiddle.net/9hppL/

.img-polaroid {
    display: table-cell;
    vertical-align: middle
}

#image {
    background: blue;
    width: 50px;
    height: 50px;
    margin-left: auto;
    margin-right: auto;
}

【讨论】：

嗯，是的，通过结合两个项目你有答案。