html - 子元素继承父样式

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>

现在，基本上，如果图像小于 580 像素（宽度），我希望它在父元素中居中。但是，由于某种原因，当我将 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