css - 为什么使用宽度 :100% to make a table expand relatively to window size creates an undesired space?

Question

我正在尝试创建一个网站，该网站将根据窗口大小调整表格元素表格单元格的大小，以便它始终适合窗口。这是我拥有的:

.table {
  display: table;
  margin-right: auto;
  margin-left: auto;
  width: 100%;
}

.tablecell {
  display: table-cell;
}

<div class="table">
  <div class="tablecell">
    <image src="fb.png">
  </div>
  <div class="tablecell">
    <image src="twitter.png">
  </div>
  <div class="tablecell">
    <image src="youtube.png">
  </div>
  <div class="tablecell">
    <image src="apple.png">
  </div>
  <div class="tablecell">
    <image src="email.png">
  </div>
</div>

问题在于 width:100%。这是结果的图片。我用蓝色圈出了问题空间。忽略 Soulja Boy 的脸。

基本上我只希望它正确居中，以便 YouTube 图片位于页面中间。使用 width:100% 创建的空间阻止了这种情况，但我想使用这个或类似的属性，以便表格始终适合窗口。

Answer 1

我认为您只是看到了图像向左对齐的事实。试试 text-align:center;，像这样:

     .table {
         display:table;
         margin-right:auto;
         margin-left:auto;
         width:100%;
     }

     .tablecell {
         display:table-cell;
         text-align:center;
     }

jsFiddle:http://jsfiddle.net/q73LK/

附带说明，无需为单元格使用类。您可以这样做:

     .table {
         display:table;
         margin-right:auto;
         margin-left:auto;
         width:100%;
     }

     .table div {
         display:table-cell;
         text-align:center;
     }

作为第二个旁注，您的图片缺少“alt”属性。对于有效的 HTML，您需要包含“alt”属性。像这样:

<div class="table">
    <div class="tablecell"><image alt="fb" src="fb.png"/></div>
    <div class="tablecell"><image alt="twitter" src="twitter.png"/></div>
    <div class="tablecell"><image alt="youtube" src="youtube.png"/></div>
    <div class="tablecell"><image alt="apple" src="apple.png"/></div>
    <div class="tablecell"><image alt="email" src="email.png"/></div>
</div>