居中对齐图像答案

【问题标题】：center align the image居中对齐图像
【发布时间】：2012-07-02 16:02:08
【问题描述】：

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

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

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

【问题讨论】：

标签： css image html alignment

【解决方案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>

【讨论】：

【解决方案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%;

}

【讨论】：

【解决方案3】：

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

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

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

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

【讨论】：

【解决方案4】：

我试着只玩一个 div

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

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

【讨论】：

【解决方案5】：

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

要使图像居中，只需使用

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

【讨论】：

【解决方案6】：

您可以使用位置：绝对。类似的东西：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;
}

【讨论】：