0

私のHTML+CSSグラフィック

このページに関する私の問題は、「高校」、「中学校」、および「小学校」の画像が、IE6、7、および8を除くすべてのブラウザーで完全に中央に配置されることです。

ページの関連部分:(わかりやすくするために編集）

CSS：

#block {
    clear: both;
    width: 682px;
}
.education_level_wrapper {
    float: left; 
    width: 100%;
}
.education_level {
    margin-bottom: 3px;
    margin-left: auto;
    margin-right: auto;
    display: block;
}

HTML：

<div id="block">
    <div class="education_level_wrapper">
        <img src="[sniped]/Title_HS.png" class="education_level" />
    </div>
</div>

IE：

代替テキスト

クロム：

代替テキスト

私はここで何が間違っているのですか？

編集：

こちらの修正バージョンを参照してください：アーカイブされていないグラフィック。上記のリンクは、アーカイブ目的で一貫性を保つためのスナップショットです。

4

2 に答える 2

1

ページの前にを付け<!DOCTYPE HTML>て、ブラウザがCSS仕様に準拠しようとするようにします。

今、あなたはこれが2001年であるかのようにブラウザにそれらのページをレンダリングさせています。

技術的な説明によると、IE6のクァークズモードでは、標準モードにしないと自動マージンは機能しません。クァークズモードを使用する必要がある場合の回避策はtext-align:center、親要素に適用することです。ただし、標準モード、別名正気モードを使用する必要があります。

于 2010-08-03T19:24:22.060 に答える
0

Education_level_wrapper関数に残された属性float：は、この問題の考えられる原因です。

マージンを使用して、ではなく位置を調整します

浮く

于 2010-08-04T11:14:21.870 に答える