4

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

.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%可以防止这种情况，但我想使用这个或类似的属性，以便表格始终适合窗口。

4

2 回答 2

5

我认为您只是看到图像与左侧对齐的事实。试试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>
于 2013-08-29T20:51:15.013 回答
2

div 间距正确，但其中的图像不正确。

在这里检查：http: //jsfiddle.net/CzaK5/

只需添加text-align:center;到.tablecell.

编辑：瑞安亨德森击败了我。

于 2013-08-29T20:52:29.113 回答