Question

我有一个正方形<div>（70px x 70px），其中包含一个可变尺寸的图像（Square，landscape或potrait）。我希望这个图像在<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。但它应该对称地适合中心。

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

Answer 1

必须是<img>元素吗？

您可以使用<div>将图片设置为background-position: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>

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

肯定会继续：

Netscape 6 +
Mozilla 1 +
Firefox 1 +
Internet Explorer 4 +
Opera 3 +
Safari 1 +

Answer 2

这将为你提供诀窍

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

Answer 3

使用display: table-cell;和text-align: center;

为您的div使用vertical-align: middle;

以下是代码：

<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

Answer 4

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

添加display：table-cell; vertical-align：middle;

Answer 5

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

首先建立一个持有者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>

Answer 6

很容易：）

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

    }

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

Answer 7

您可以使用display：inline-block和：after for 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，您可以查看其他解决方案。

Answer 8

这是您在CSS中居中的最终指南＆gt; 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;
}

以div为中心的图像

8 个答案: