CSS尝试使用width：100％使表相对于窗口大小扩展，创建不需要的空间？ [英] CSS Trying to use width:100% to make a table expand relative to window size, creates an undesired space?

问题描述

我试图创建一个网站，它将调整表格元素表格单元格的大小相对于窗口的大小，以便它将永远适合窗口内。这里是我有：

I'm trying to create a website that will adjust the size of table elements table cells relative to the size of the window, so that it will always fit inside the window. Here's what I have:

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

和以下CSS

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

         .tablecell {
         display:table-cell;
         }

这是一个图片是什么东西是宽度：100％的结果。我用蓝色圈出问题空间。忽略Soulja Boy的脸。

What's messing this up is the width:100%... Here's a picture of the results. I circled the problem space in blue. Ignore Soulja Boy's face.

http://imgur.com/uhgbLoP

基本上，我只是想让这个中心正确，以便YouTube图片在页面的中间。使用width：100％创建的空间可以防止这种情况，但是我想使用此属性或类似的属性，以使表格始终适合窗口。

Basically I just want this centered correctly so that the youtube image is in the middle of the page. The space created by using width:100% prevents that, but I want to use this or a similar property so that the table will always fit inside the window.

推荐答案

我想你只是看到图像左对齐的事实。尝试 text-align：center; ，如下所示：

I think you're just seeing the fact that the images are aligned to the left. Try text-align:center;, like this:

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

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

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

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

作为旁注，不需要为单元格使用类。您可以改为：

As a side note, there is no need to use classes for the cells. You can do this instead:

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

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

作为第二侧注 alt属性。对于有效的HTML，您需要包含alt属性。像这样：

As a second side note, you are missing "alt" attribute on your images. For valid HTML, you need to include the "alt" attribute. Like this:

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

这篇关于CSS尝试使用width：100％使表相对于窗口大小扩展，创建不需要的空间？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！