在div中居中图片

Question

在div中居中图片

3

我有一个正方形的 <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，但它应该对称地适合中心位置。

我还需要使其跨浏览器兼容... 感谢您的帮助...

- Harsh Reddy

对于给定的代码，它是如何运行的？ - Gnanz

这个问题在stackoverflow上已经被广泛讨论过了。我发现唯一可靠的方法是使用JavaScript。对于简单的情况，表格效果很好。 - specialscope

8个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Yotam Omer · 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>

请查看工作的jsFiddle。就浏览器支持而言，我从未遇到过不支持此功能的浏览器。

它肯定可以在以下浏览器上运行：

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

- Akshay · Answer 2

0

这会对你有帮助

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

- Akshay

你的图片尺寸是多少？如果它有固定的高度和宽度，你可以使用CSS对齐它，例如使用margin 0 auto，并稍微调整一下顶部边距以及居中对齐。这可能会有所帮助...自动垂直居中对齐不太可能，你需要稍微调整一下margin。 - Akshay

他写道，可能有三种不同的尺寸：“可变尺寸（正方形、水平矩形或垂直矩形）”。 - Yotam Omer

- Gimmy · Answer 3

使用 display: table-cell; 为您的 div 设置 text-align: center; 和 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

- Goutam Pal · 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;

- Afonso Matos · 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>

- Raza · Answer 6

很容易 :)

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

    }

检查 fiddle http://jsfiddle.net/9hppL/2/

- Airen · Answer 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;
}

请查看演示。点击这里，您可以查看其他解决方案。

- Tobias Ritzau · Answer 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;
}