ヘッダー領域の中央にロゴがある可変幅のサイトがあります。ウィンドウのサイズに関係なく、ロゴは中央に表示されます。ie9 を除くすべてのブラウザーで動作します。ie9 では、右側にスタックしています。左側に固定できれば妥協できますが、右側はそうではありません。私の推測では、ie9 は css コードをサポートしていません。
.logo {
width:100%;
position:relative;
}
.logo img {
margin-left:auto;
margin-right:auto;
display:block;
}
ここにウェブサイトがあります http://www.cyberdefenselabs.org/
他のブラウザに影響を与えたり、抜本的な再コード化を伴わない ie9 の回避策を知っている人はいますか?
使用する場合
margin:auto;
言うべき
margin:0 auto;
margin-leftと-rightを取り除き、margin：0autoに変更します。
また、含む要素はtext-align：centerである必要があります。これは、中央に配置する要素にtext-align：leftを配置して元に戻します。
上記の人は正しいです-適切にクリアされていないフロートがあります。ただし、スタイルを変更する前にレイアウトを整理する必要があります。同じメイン メニューが 3 回ありますが、そのうちの 1 つが非表示になり、1 つ (最初のメニュー) が白地に白のリンクになっています。最初のメイン メニュー (「social-header-wrap」クラスの div) を削除するだけでも問題は解決します。
エレメントには、適切に消去されていないフローティング.social-header-wrapエレメントが含まれています。このスタイルを追加:
.social-header-wrap {overflow:hidden}