0

私には3つの要素があります。

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 (幅) より小さい場合は、親要素の中央に配置します。しかし、何らかの理由で、子の幅を自動に設定すると、親要素の幅全体がいっぱいになります。親divの中央に配置できるように、写真の幅にしたい。これどうやってするの？

4

2 に答える 2

1

親画像内で画像を中央に配置したい場合は、次を試してください。

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

css で画像の幅を調整する必要はありません。

于 2012-12-06T18:00:31.880 に答える
0

子の表示を に<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があります

于 2012-12-06T17:59:32.263 に答える