Question

我有三个要素。

CSS：

#parent {
    height: 300px;
    width: 580px;
    background-color: #f5f5f5;
    overflow: hidden;
}

#child {
    margin-right: auto;
    margin-left: auto;
    height: 300px;
    width: auto;
    overflow: auto;
}

#child img {
    height: auto;
    width: auto;
}

HTML：

<div id="parent">
    <div id="child">
        <img/>
    </div>
</div>

现在，基本上，如果图像小于580px（宽度），我希望它在父元素中居中。但是，出于某种原因，当我将Child的宽度设置为auto时，它会填充Parent元素的整个宽度。我希望它是照片的宽度，以便它可以在父div中居中。我怎么能这样做？

Answer 1

如果您希望将图像置于其父图像中心，请尝试以下操作：

#child img {
    margin: 0 auto;
    display: block;
}

无需使用css调整图像的宽度。

Answer 2

将子<div>的显示设置为inline-block，然后将父text-align设置为center：

#parent {
    height: 300px;
    width: 580px;
    background-color: #f5f5f5;
    overflow: hidden;
    text-align:center;
}

#child {
    display:inline-block;
    height: 300px;
    width: auto;
    overflow: auto;
}

这是JSFiddle

子元素继承父样式

2 个答案: