Essayez d'utiliser width:100% pour faire une table de développer par rapport à la taille de la fenêtre, crée un indésirable de l'espace?

Je suis en train de créer un site web qui permettra d'ajuster la taille de la table, la table des éléments de cellules par rapport à la taille de la fenêtre, de sorte qu'il sera toujours visible à l'intérieur de la fenêtre. Voici ce que j'ai:

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

Et le code CSS suivant

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

         .tablecell {
         display:table-cell;
         }

Ce qui joue c'est le width:100%... Voici une photo des résultats. J'ai entouré le problème de l'espace en bleu. Ignorer Soulja Boy visage.

Essayez d'utiliser width:100% pour faire une table de développer par rapport à la taille de la fenêtre, crée un indésirable de l'espace?

Fondamentalement, je veux juste cette centré correctement de sorte que le youtube de l'image est dans le milieu de la page. L'espace créé par l'aide de width:100% en empêche, mais je veux l'utiliser, ou d'un bien similaire, de sorte que la table sera toujours s'adapter à l'intérieur de la fenêtre.

OriginalL'auteur little tiny man | 2013-08-29

  1. 4

    Je pense que vous êtes juste de voir le fait que les images sont alignées à gauche. Essayez text-align:center;, comme ceci:

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

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

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

    Comme une note de côté, il n'est pas nécessaire d'utiliser des classes pour les cellules. Vous pouvez faire ceci à la place:

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

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

    Comme une seconde note de côté, il vous manque l'attribut "alt" sur les images. Pour HTML valide, vous devez inclure l'attribut "alt". Comme ceci:

    <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>
    il n'est pas nécessaire de fermer une <img> balise HTML5, altattributs sont cependant encore nécessaires
    Merci beaucoup!!! Excuse comment les nouvelles je suis pour ce genre de choses
    Merci! J'ai mis à jour ma réponse avec vos corrections.

    OriginalL'auteur htxryan

  2. 1

    Les divs sont correctement espacées, mais les images à l'intérieur, il ne le sont pas.

    Vérifier ici: http://jsfiddle.net/CzaK5/

    Juste ajouter text-align:center; à la .tablecell.

    Modifier: Ryan Henderson me battre pour elle.

    OriginalL'auteur jdepypere