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的{{1}}不起作用。

JSFIDDLE

Answer 1

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

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

或者你可以改变图像行为以显示为块，在html中，图像就像一个＆＃39;字符＆＃39;所以你可以这样做：

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

小提琴：http://jsfiddle.net/bj6meje0/2/

区别？通过第二个aproch，您将能够更改＆＃34; text-align＆＃34; div的属性，否则文本将显示为图片的中心

在中间对齐img元素

1 个答案: