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 结构的愚蠢问题......请不要留下让我士气低落的评论继续学习“这是作业吗……”或“去补习班”等……

4

2 回答 2

14

最短和最简单的答案是：您不应该在网页中垂直居中。创建 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 回答