FF、IE6、IE7で動作するHTMLで垂直方向と水平方向の中心になる実用的なソリューション

Firefox、IE6、およびIE7で動作するHTMLの垂直方向と水平方向のコンテンツを中心にする実用的なソリューションは何でしょうか？FF、IE6、IE7で動作するHTMLで垂直方向と水平方向の中心になる実用的なソリューション

いくつかの詳細：

私はページ全体のためのソリューションを探しています。
要素の幅のみを中央揃えにする必要があります。要素の高さは設計時にはわかりません。
ウィンドウを最小化すると、すべての空白がなくなったときにスクロールが表示されます。

"leftSpace幅=（screenWidth-widthOfCenteredElement）/ 2" +
"centeredElement幅= widthOfCenteredElement" +
「rightSpace幅=（screenWidth：すなわち、画面の横幅として表されるべきで -widthOfCenteredElement）/ 2"

と高さの同じ：

"topSpace高さ=（screenHeight-heightOfCenteredElement）/ 2" +
「centeredElement高さ=私はテーブルの使用がOKであることを意味実用的によりheightOfCenteredElement「+
"bottomSpace高さ=（screenWidth-heightOfCenteredElement）/ 2"

。私はこのレイアウトを主にログインのような特別なページのために使うつもりです。したがって、CSSの純度はそれほど重要ではありませんが、将来の互換性のためには標準に従うことが望ましいです。 community.contractwebdevelopment.comから

出典

2008-09-08 Alexander Yanovets

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>Centering</title> 
<style type="text/css" media="screen"> 
    body, html {height: 100%; padding: 0px; margin: 0px;} 
    #outer {width: 100%; height: 100%; overflow: visible; padding: 0px; margin: 0px;} 
    #middle {vertical-align: middle} 
    #centered {width: 280px; margin-left: auto; margin-right: auto; text-align:center;} 
</style> 
</head> 
<body> 
<table id="outer" cellpadding="0" cellspacing="0"> 
    <tr><td id="middle"> 
    <div id="centered" style="border: 1px solid green;"> 
    Centered content 
    </div> 
    </td></tr> 
</table> 
</body> 
</html>

ソリューションも良いものです。あなたのコンテンツの高さが中央に位置する必要があることが分かっていれば、より良いようです。水平の場合

出典

2008-09-08 09:18:49

：IEのレンダリングのバグを修正するために体内に残って：

<style> 
body 
{ 
    text-align:left; 
} 
.MainBlockElement 
{ 
    text-align:center; 
    margin: 0 auto; 
} 
</style>

あなたは、テキスト整列を必要としています。

出典

2008-09-08 14:01:03

これは達成しようとしていることですか？そうでない場合は、以下のイメージとは異なるものを説明してください。

alt text

出典

2008-09-11 18:00:13 jessegavin

を使用することができます。中心のコンテンツは、画面の50％だけでなく、固定サイズ（ピクセル単位）である必要があります。そして、コンテンツの幅だけを指定して修正しました。そして、固定された高さを指定しないで解決策を探しています。だから、このレイアウトは、幅は違うが同じ幅のものに使うことができる。 –

これにより、ウィンドウのサイズを変更すると、コンテンツのサイズは常に同じになりますが、中央に配置されます。 –

この問題については

#horizon   
    { 
    text-align: center; 
    position: absolute; 
    top: 50%; 
    left: 0px; 
    width: 100%; 
    height: 1px; 
    overflow: visible; 
    display: block 
    } 

#content  
    { 
    width: 250px; 
    height: 70px; 
    margin-left: -125px; 
    position: absolute; 
    top: -35px; 
    left: 50%; 
    visibility: visible 
    } 

<div id="horizon"> 
    <div id="content"> 
     <p>This text is<br><emphasis>DEAD CENTRE</emphasis ><br>and stays there!</p> 
    </div><!-- closes content--> 
</div><!-- closes horizon-->

出典

2008-11-14 00:30:33 keikkeik

http://www.webmonkey.com/codelibrary/Center_a_DIVからは、それは私が通常を探していますされていない、まさにこのスタイル

#yourElement { 
    margin:0 auto; 
    min-width:500px; 
}

出典

2012-10-22 11:14:59

FF、IE6、IE7で動作するHTMLで垂直方向と水平方向の中心になる実用的なソリューション

答えて

関連する問題