0

テーブルを使用せずに、少なくとも水平方向に画像を中央に配置する必要があり、少なくとも Internet Explorer 8 で実行できます (可能であれば Internet Explorer 7 も)。

Stack Overflow で以前に尋ねられた質問に似た解決策が必要です。画像を div 内に配置しますか? 、しかし、テーブルを使用してそれを行うことは、ここでは受け入れられない解決策です.

「margin:0px auto」でフィドルを試してみました。これは他のすべての要素で機能しますが、画像では機能しません。クイックコードは次のとおりです。

HTML

<div class="outer">
    <img src="https://m.ak.fbcdn.net/profile.ak/hprofile-ak-ash4/195658_100001734379625_1121483775_q.jpg" width="100" height="100" />
</div>​

CSS

.outer{
    width:300px;
    border:1px #000 solid;
    padding:5px;
}.outer img{
    border:1px #F00 solid;
    margin:0 auto;
}

Internet Explorer 7 にも適用できる純粋な CSS ソリューションはありますか?

4

4 に答える 4

2

垂直方向と水平方向の両方を中央揃えにする場合:

.outer{
    width:300px;
    height: 300px;
    border:1px #000 solid;
    padding:5px;
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}
.outer img{
    border:1px #F00 solid;
}

http://jsfiddle.net/M7LJx/1/

ただし display: table-cell、IE7では機能しません。

于 2012-09-10T12:20:49.623 に答える
2

CSSコードを置き換えるだけです：

.outer{
    width:300px;
    border:1px #000 solid;
    padding:5px;
    margin:0 auto;
    text-align: center;
}
.outer img {
    border:1px #F00 solid;
}

すべてのブラウザで動作します。

于 2012-09-10T12:27:18.103 に答える
2

text-align:center; を追加します。.outer クラスに。

.outer{
    width:300px;
    border:1px #000 solid;
    padding:5px;
    text-align:center;
}
于 2012-09-10T12:19:23.883 に答える
0

img を display:block にする必要がある場合は、margin:0 auto; を使用する必要があります。なぜなら、text-align:center; ブロック要素では機能しません。

ただし、img が display:inline; の場合 (または設定されていないため、デフォルトはインライン)、text-align が機能します。

于 2012-09-10T12:33:50.830 に答える