尝试使用宽度:100%使表格相对于窗口大小扩展,会产生不希望的空间？

Question

我正在尝试创建一个网站,它将调整表格元素表格单元格相对于窗口大小的大小,以便它始终适合窗口内部.这就是我所拥有的:

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

.tablecell {
  display: table-cell;
}

以及下面的CSS

<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>

弄乱这个的是宽度:100%......这是结果的图片.我把问题空间用蓝色圈起来.忽略Soulja男孩的脸.

基本上我只是想要正确居中,以便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>