6

Firefox、IE6、および IE7 で動作する HTML のコンテンツを垂直方向および水平方向に中央揃えするための実用的なソリューションは何ですか?

いくつかの詳細:

  • ページ全体の解決策を探しています。

  • 中央に配置する要素の幅のみを指定する必要があります。要素の高さは設計時にはわかりません。

  • ウィンドウを最小化すると、すべての空白がなくなったときにのみスクロールが表示されます。つまり、画面の幅は次のように表す必要があります。

"leftSpace width=(screenWidth-widthOfCenteredElement)/2"+
"centeredElement width=widthOfCenteredElement"+
"rightSpace width=(screenWidth-widthOfCenteredElement)/2"

高さについても同じです。

"topSpace height=(screenHeight-heightOfCenteredElement)/2"+
"centeredElement height=heightOfCenteredElement"+
"bottomSpace height=(screenWidth-heightOfCenteredElement)/2"

  • 実際には、テーブルの使用は問題ありません。このレイアウトは、主にログインなどの特別なページに使用する予定です。したがって、CSS の純度はここではそれほど重要ではありませんが、将来の互換性のために標準に従うことが望ましいです。
4

5 に答える 5

4

http://www.webmonkey.com/codelibrary/Center_a_DIVから

#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-14T00:30:33.973 に答える
2 
<!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>

community.contractwebdevelopment.comからのソリューションも良いものです。また、中央に配置する必要があるコンテンツの高さがわかっている場合は、より良いようです。

于 2008-09-08T09:18:49.387 に答える
1

水平の場合：

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

IEのレンダリングのバグを修正するには、本文にtext-align：leftが必要です。

于 2008-09-08T14:01:03.000 に答える
1

この号では、このスタイルを使用できます

#yourElement {
   margin:0 auto;
   min-width:500px;
}
于 2012-10-22T11:14:59.677 に答える
0

これはあなたが達成しようとしていることですか？そうでない場合、下の画像と何が違うのか説明してください。

代替テキスト

于 2008-09-11T18:00:13.647 に答える