如何将"表格"放在网页中间?

OM *_*ity 5 html css webpage

我有一个非常基本的表结构放在网页的中间/中心.我有一个下面的代码,我知道这是不完整的,因为我在构建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>
Run Code Online (Sandbox Code Playgroud)

另外,请解释在实现此结构化时间中应用属性和CSS背后的概念.这样我就可以用它来进一步学习....

我完全是HTML-CSS使用的新手和哑巴...所以我要求你们所有的技术人员和极客都要忍受我对HTML-CSS结构的愚蠢问题..请不要留下令我士气低落的评论继续学习像"这是一个家庭作业......"还是"转向课程"等......

Pet*_*ter 12

最简单和最简单的答案是:您不应该在网页中垂直居中.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>
Run Code Online (Sandbox Code Playgroud)


Chl*_*bta 10

试试这个 :

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

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


        }
    </style>
Run Code Online (Sandbox Code Playgroud)

  • 这样做是因为它将表格的左上角放在页面的中心.所以它并不是真正的中心,而是非常接近. (2认同)