1

如何将图像居中对齐到垂直和水平到 div。

我需要在不固定高度或填充的情况下获得它，因为图像大小不是恒定的，因此它应该对所有图像都灵活。

这是我的踪迹 http://jsfiddle.net/yHdAx/2/

4

6 回答 6

2

要居中对齐图像，您必须将其显示设置为阻止，然后将左右边距设置为自动。在新代码示例中，我还使用顶部和底部边距进行了此操作。这是完成这项工作所需的代码：

CSS

.test {
    background-color:#999;
    height:60%;
    display:block;
    vertical-align:middle;
    padding-top: 25%;
    padding-botton: 25%;
}

.test img {
    max-width:50%;
    vertical-align: ;
    display: block;
    margin: auto auto auto auto;
}

HTML

<div style="height:800px; background-color:#CCC">
    <div class="test">
        <img src="http://static.clickbd.com/global/classified/item_img/607724_0_original.jpg" />
    </div>
</div>
于 2012-07-02T08:47:28.387 回答
1

嘿，现在您可以table-cell像这样习惯 div 中的属性

现场演示 http://jsfiddle.net/yHdAx/3/

HTML

 <div style="height:800px; background-color:#CCC">
<div class="test">
<img src="http://static.clickbd.com/global/classified/item_img/607724_0_original.jpg" />
</div>

CSS

  .test{
background-color:red;
height:600px; display:table-cell; vertical-align:middle;
    text-align:center;
}
.test img{
max-width:50%;

}

更多信息http://www.brunildo.org/test/img_center.html

于 2012-07-02T08:49:17.323 回答
0

应用于display:block图像并将其边距设置为auto。

.test {
    background-color:#999;
    padding: 50px 0;
}

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

这是小提琴，http://jsfiddle.net/yHdAx/5/

于 2012-07-02T08:55:26.510 回答
0

如果你没有在包含的 div 上设置高度怎么办，那么设计会中断吗？

要使图像居中，只需使用

.test img {
    display:block; 
    width:25%; 
    margin:0 auto;
}
于 2012-07-02T09:11:31.203 回答
0

我试着只玩一个 div

div  {
    display:table-cell;
    background:red;
    width:500px;
    height:500px;
    vertical-align:middle;
    text-align:center;
}

我希望这也能帮助你：- http://jsbin.com/ihunuq/3/edit

于 2012-07-02T09:32:34.373 回答
0

您可以使用位置：绝对。类似的东西：jsfiddle。

.test{
  background-color:#999;
  height:60%;
  width: 100%;
  position: relative;
}
.test img{
  max-width:50%;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}
于 2012-07-02T13:22:27.780 回答