Question

我设置了0自动保证金，为什么它不起作用？

.main_logo {
    float: left;
    width: 157px;
    height: 123px;
    border: 1px solid #b4b4b4;
}
.app-thumb-image {
    margin: 0 auto;
    width: 124px;
    height: 97px;
    background-color: #000;
}

Answer 1

将图像设为display:block;或用另一个div包装图像，并将图像类添加到该div。

.app-thumb-image {
    margin: 0 auto;
    width: 124px;
    height: 97px;
    display:block;
    background-color: #000;
}

<强> DEMO

Answer 2

对于水平中心：将image显示为block元素，如：

display:block;

对于水平和垂直中心：您可以使用position: absolute - 这是将其集中的众多方法之一：

添加到父级：

position: relative;

和一个孩子：

position:absolute;
margin:auto;
top:0;
bottom:0;
left:0;
right:0;

http://jsfiddle.net/g53a3/7/

Answer 3

两个选项：

应用display：block;图像然后保证金：0自动;将做的伎俩（块元素的解决方案）
应用text-align：center;到图像的父div，你也可以（内联元素的解决方案）

两者都很好用，但默认情况下image是内联元素，所以第二种解决方案可能是最常用的。

Answer 4

您可以使用position:absolute将其设为绝对中心

<强> Working Demo

<强> CSS

.main_logo {
    float: left;
    width: 157px;
    height: 123px;
    border: 1px solid #b4b4b4;
    position:relative;
}
.app-thumb-image {
    margin: 0 auto;
    width: 124px;
    height: 97px;
    background-color: #000;
    position:absolute;
    right:0;
    left:0;
    bottom:0;
    top:0;
    margin: auto;
}

Answer 5

对于保证金，请指定13px而不是0并添加display：block属性，请参阅下面的

 .app-thumb-image {
            margin:13px auto;
            width: 124px;
            height: 97px;
            display:block;
            background-color: #000;
        }

http://jsfiddle.net/g53a3/5/

以下是我如何获得13px - （main_logo height - app-thumb-image height）/ 2 ie（123-97）/ 2 = 13

将div放在包含图像内部的div内

5 个答案: