html - 居中对齐 img 元素

Question

我需要在元素中间设置图片。

我的 CSS 示例:

.main {
    width: 600px;
    position: fixed;
    left: 50%;
    margin: 100px -300px;
    background-color: green;
}
.main .image-holder {
    width: 100%;
    display: block;
}
.main .image-holder img {
    margin: 10px auto;
}

.main 具有固定宽度，但该大小在 jQuery 中是动态可变的。

.image-hodler 应该类似于缩略图。我将宽度设置为 100%，因为我永远不知道主要元素的大小。

img 并且此处将 margin 设置为 auto 不起作用。

JSFIDDLE

Answer 1

只需在父 div 上添加 'text-align: center'，如下所示:http://jsfiddle.net/bj6meje0/1/

.main .image-holder {
    width: 100%;
    display: block;
    text-align: center
}

或者您可以更改图像行为以显示为 block ，在 html 中图像就像一个“字符”，因此您可以这样做:

.main .image-holder img {
    display: block;
    margin: 10px auto;
}

fiddle :http://jsfiddle.net/bj6meje0/2/

区别是什么？使用第二个方法，您将能够更改 div 的“文本对齐”属性，否则文本将显示为图片居中