-3

キャンバスを水平方向に中央揃えする際に問題があります。垂直方向の中央に配置するために、display: テーブルが追加されました。非常に奇妙な。

html, body {
    width:  100%;
    height: 100%;
    margin: 0px;
}

#container {
    border: solid 1px #000;
    height: 100%;
    width: 85%;
    position: absolute;
    right: 0;
    display:table;
}

#container2 {
    display:table-cell;
    vertical-align:middle;
}

#container img {
    max-width: 100%;
    max-height: 100%;   
}​

<div id="container">
    <div id="container2">
    <img src="http://cultureandcommunication.org/tdm/nmrs/fa1/files/2010/10/lolcats4.jpg" />
    </div>
</div>​

jsfiddle.net/tGtDv/1

4

1 に答える 1

1

左右のマージンを に設定すると、ブロック要素を中央に配置できますauto。

div.container2 {
    margin-left: auto;
    margin-right: auto;
}

水平方向と垂直方向の両方を中央に揃えたい場合は、幅と高さを設定した別のアプローチが必要です。

div.container2 {
    height: 200px;
    left: 50%;
    margin-left: -100px;
    margin-top: -100px;
    /* position: absolute; */
    position: fixed;
    top: 50%;
    width: 200px;
}

この場合、要素をその親要素の左に 50%、右に 50% 配置します。HTML 要素の原点が左上にあるため、少しずらす必要があります。それがマージンの目的です。

于 2012-12-17T09:24:38.787 に答える