如何将“表格”置于网页中央？

Question

如何将“表格”置于网页中央？

5

我有一个非常基本的表格结构要放置在网页的中间/居中位置。下面是我的代码，我知道它并不完整，因为我在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的结构...请不要留下那些让我失去学习动力的评论，比如“这是作业吗...”或者“去上补习班”，等等...

- OM The Eternity

页面中间怎么放置？水平、垂直还是两者都要？ - Salman A

页面中心点在x轴和y轴上等距离。 - OM The Eternity

请勿使用表格进行页面布局。如果是用于制作表格数据，则忽略此注释。 - Eirinn

@Eirinn 这基本上是用于创建登录页面的，因此如果不使用表格，我该如何使用 DIV 结构使其工作？ - OM The Eternity

要么我没有理解你的问题，要么你误解了表格的含义... 你可以轻松地用 div 和 span 替换表格。使用表格进行布局几乎总会导致头痛 :) - Eirinn

@Eirinn，你在谈论关于表格和div的额外事情，但我对你建议的如何用DIV替换表格更感兴趣。 - OM The Eternity

2个回答

10

尝试这个：

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

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


        }
    </style>

- Chlebta

这个类要应用在表格上吗？ - OM The Eternity

非常简单，这是一个简单的类：它表示我想让我的表格在页面顶部的50％处（即垂直居中）和左侧的50％处（即水平居中）放置。请检查“已解决”按钮。 - Chlebta

2

它的作用是将表格的左上角放在页面中心。因此，它并不是真正的居中，但非常接近。 - Peter

我使用25%将其放置在页面中心附近 :) - nahab

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Peter · Accepted Answer

最简单的答案是：在网页中不应该垂直居中元素。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>