Question

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

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

Answer 1

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

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

Answer 2

嘿，现在你可以习惯你div中的table-cell属性

现场演示 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

Answer 3

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

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

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

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

Answer 4

如果你没有在包含div上设置一个高度怎么办？那么desig会破坏吗？

要使图像居中，请使用

.test img {
    display:block; 
    width:25%; 
    margin:0 auto;
}

Answer 5

我试着只玩一个div

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

我希望这也可以帮到你： - http://jsbin.com/ihunuq/3/edit

Answer 6

您可以使用position：absolute。这样的事情：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;
}

居中对齐图像

6 个答案: