5

Webページの中央/中央に配置する非常に基本的なテーブル構造があります。私は以下のコードを持っています、私はこれを実現するために不完全であることを知っています、私はHTML部分を構造化するのが苦手なので、私を助けてください

<div align="center" style="vertical-align:bottom">
<div align="center" style="vertical-align:bottom">
<table>
<tr><td colspan="2"></td></tr>
<tr><td>Name</td><td>J W BUSH</td></tr>
<tr><td>Proficiency</td><td>PHP</td></tr>
<tr><td>COmpany</td><td>BLAH BLAH</td></tr>
</table>
</div>
</div>

また、今回の構造化を実現するためのプロパティとCSSの適用の背後にある概念を説明してください。さらなる学習に使えるように…。

私は完全に初心者で、HTML-CSSの使用に愚かです...だから私はあなたにすべての技術者とオタクにHTML-CSS構造化の私のばかげた質問に耐えることを要求します.. 「宿題ですか...」または「GOTOTUTIONCLASSES」など...

4

2 に答える 2

14

最も簡潔で簡単な答えは、Web ページ内で縦方向に中央揃えにするべきではないということです。HTML と CSS は、それを念頭に置いて作成されていません。これらはテキスト フォーマット言語であり、ユーザー インターフェイス デザイン言語ではありません。

とは言っても、これが私が考えることができる最良の方法です。ただし、これは Internet Explorer 7 以下では機能しません。

<style>
  html, body {
    height: 100%;
  }
  #tableContainer-1 {
    height: 100%;
    width: 100%;
    display: table;
  }
  #tableContainer-2 {
    vertical-align: middle;
    display: table-cell;
    height: 100%;
  }
  #myTable {
    margin: 0 auto;
  }
</style>
<div id="tableContainer-1">
  <div id="tableContainer-2">
    <table id="myTable" border>
      <tr><td>Name</td><td>J W BUSH</td></tr>
      <tr><td>Proficiency</td><td>PHP</td></tr>
      <tr><td>Company</td><td>BLAH BLAH</td></tr>
    </table>
  </div>
</div>
于 2012-04-06T11:02:11.867 に答える
10

これを試して ：

<style type="text/css">
        .myTableStyle
        {
           position:absolute;
           top:50%;
           left:50%; 

            /*Alternatively you could use: */
           /*
              position: fixed;
               bottom: 50%;
               right: 50%;
           */


        }
    </style>
于 2012-04-06T10:50:59.257 に答える