Pourquoi display:table-cell ne pas le contenu du centre sans display:table?

Je suis à la recherche de la plus efficace (ou élégant) à la verticale et à l'horizontale le contenu du centre de hauteur variable. J'ai trouvé ceci: http://cssdeck.com/t/2veysdkg/16, qui utilise des règles css à la verticale du centre de l'essentiel du contenu.

Mes demandes pour l'écriture de ce morceau de code:

  • Doit être en mesure de centre de variable et fixe la largeur du contenu verticalement et horizontalement
  • Centrée sur le contenu doit être à l'intérieur de la normale de la circulation des documents (donc pas de chevauchement)
  • Collant, pied de page et normal d'en-tête, à la fois de 100% de la largeur de
  • Que quelques hacks, laide du code ou de la non-sémantique html que possible
  • Je n'ai pas de soins sur la prise en charge pour IE6, IE7 (je vais utiliser une autre feuille de style pour eux)

La chose étrange est que les exigences ci-dessus ne sont remplies que lorsque l'en-tête et pied de page sont mis à display:table-row, et la balise "body" pour display:table. C'est bizarre parce que si je comprends bien le css va générer anonyme éléments de la table lors de la table parent éléments sont manquants. Donc display:table-cell devrait fonctionner sans tous les éléments environnants, mais pourtant, je n'ai pas été capable de le faire fonctionner.

Si ça ne tenait qu'à moi, je préfère ne pas salir avec le mode d'affichage de la balise body, et de laisser l'en-tête et pied de page sur display:block. Mais je n'ai pas été capable de le faire fonctionner. Personne ne comprends pourquoi cela ne fonctionne pas, et comment répondre aux exigences indiquées ci-dessus sans l'utilisation de display:table et display:table-row?

Pour ceux qui préfèrent ne pas visiter cssdeck pour afficher mon code source, je vais le poster ici:

HTML

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Vertical Centering</title>
    </head>
    <body>
        <div id="header">header</div>
        <div id="vertical">
            <div id="horizontal">content</div>
        </div>
        <div id="footer">footer</div>
    </body>
</html>

CSS

body, html {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
}

body {
    display: table;
}

#header {
    display: table-row;
    height: 2em;
    background: gray;
}

#vertical {
    display: table-cell;
    vertical-align: middle;
    width: 100%;
    height: 100%;
}

#horizontal {
    height: 500px;
    width: 500px;
    margin: auto;
    background: gray;
}

#footer {
    height: 2em;
    display: table-row;
    width: 100%;
    background: gray;
}
Pouvez-vous nous montrer le code html où vous sont effectivement avoir des problèmes?
bien sûr, je l'ai ajouté à la question (un/modifiable exemple peut être trouvé ici: cssdeck.com/t/2veysdkg/16).

OriginalL'auteur | 2012-06-08

  1. 5

    En fait, le navigateur est l'insertion d'un anonyme, un élément de la table comme vous l'avez prévu. Toutefois, cet élément n'existe que pour le tableau sémantique de travail. Il n'y a pas moyen en CSS pour cibler ce bloc anonyme pour lui donner 100% de la largeur et de la hauteur à votre disposition exige.

    Vous aurez besoin d'un réel élément dans votre code HTML pour agir à titre de "table" objet si vous voulez modifier sa présentation.

    Alors, comment voulez-vous simplifier (ou d'améliorer) du code, en gardant à l'esprit les exigences comme indiqué dans la question? Est-il possible d'obtenir cette mise en page de manière plus élégante?
    Je ne le ferais pas. Si vous voulez l'ensemble de la page à utiliser le tableau de présentation de l'algorithme puis il n'y a pas de problème donnant display:table; à la body élément. Si vous ne voulez pas traiter le corps spécialement ensuite, je voudrais ajouter un élément de conteneur, et donnent à la disposition de table. Rappelez-vous le problème ici est que vous voulez appliquer style à un autre élément anonyme de sorte que vous devez donner quelque chose à être désignée par. Bien que vous ne voulez pas ajouter des éléments, ce qui est acceptable ici parce que vos éléments dispositions doivent être liés les uns aux autres, ils ne sont pas autonomes.
    Merci, c'est le premier clair, d'articuler la réponse qui se rapporte à ce que j'ai demandé.
    Par ailleurs, j'ai fait un dessin avec un supplément de récipient avec de la disposition de table, comme vous l'avez spécifié. Compte tenu de cette conception (qui utilise un supplément de unsemantic div pour la disposition de table), et l'original (qui s'applique la disposition de table pour le corps), laquelle préférez-vous? (vous pouvez trouver l'dessins ici: cssdeck.com/t/2veysdkg/16 (version originale) et cssdeck.com/t/2veysdkg/51 (en sus récipient avec de la disposition de table)

    OriginalL'auteur Gareth

  2. 6

    Comment la propriété d'affichage de Travail?

    La propriété d'affichage vous permet de spécifier une gamme de tables de valeurs liées à la afin de rendre les éléments d'affichage comme si elles étaient des éléments de la table. Affichage des valeurs sont:

    • table rend l'élément se comporte comme un élément de la table
    • table-row rend l'élément se comporter comme une ligne de la table (tr) de l'élément de
    • table-cell rend l'élément comporte comme une cellule de tableau (td) de l'élément de
    • table-row-group rend l'élément se comporte comme un corps de table de groupe de lignes
      (tbody) élément
    • table-header-group rend l'élément se comporte comme un tableau de la ligne d'en-tête
      groupe (thead) élément
    • table-footer-group rend l'élément se comporte comme un tableau de la ligne de pied de page
      groupe (pied de page) de l'élément de
    • table-caption rend l'élément se comporte comme un tableau de l'élément caption
    • table-column rend l'élément comporte comme une colonne de table (col)
      élément
    • table-column-group rend l'élément comporte comme une colonne de la table de groupe
      (colgroup) élément

    vérifier la liste complète ici... http://www.digital-web.com/articles/everything_you_know_about_CSS_Is_wrong/

    mais que votre problème peut être résolu comme ceci

    Vérifier le travail de violon http://jsfiddle.net/jZJXf/1/

    Css devrait être comme ça.

    body, html {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
}
body {
    display: table;
}


#header {
    width: 100%;
    height: 2em;
    background: gray;
}

#vertical {
    display: table;
    width: 100%;
    height: 100%;
}

#horizontal {
    display:table;
    height: 500px;
    width: 500px;
    margin: 10% auto 0% auto;
    background: gray;
}

#footer {
    height: 2em;
    width: 100%;
    background: gray;
    bottom: 0px;
    display: table;

}
    Merci pour l'info, mais avec votre solution le pied de page se termine en dessous de la fenêtre d'affichage du navigateur. Une idée de comment résoudre ce problème?
    cochez cette. jsfiddle.net/jZJXf/2
    Il semble tout droit dans jsfiddle, mais check it out ici: cssdeck.com/t/2veysdkg/48, le pied de page est presque au milieu de l'écran. Vos marges sur #horizontale sorte de centre de l'élément, mais cela ne fonctionne pas pour chaque résolution (en fait, il n'est pas le mien).
    Supprimer les marges supérieure et inférieure, et la mise en page s'effondre. Donc pour le moment, ce n'est toujours pas à résoudre mon problème de mise en page, comme le code original sera effectuer le centrage vertical de mieux, un collant, pied de page et d'utiliser moins d'affichage:les balises de tableau. Pour reformuler ma question d'origine, ce que je cherche est: pouvez-vous améliorer sur mon code sans affecter son fonctionnement ou ajouter de la complexité?
    vérifiez dans cssdesk cssdeck.com/t/2veysdkg/49

    OriginalL'auteur CSS Guy

  3. 0

    Ce travail pour moi (CSS):

    body, html {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
}

body {
}

#header {
    height: 2em;
    background: gray;
}

#vertical {
    display: table-cell;
    vertical-align: middle;
    width: 500px;
    height: 500px;
}

#horizontal {
    height: 300px;
    width: 300px;
    margin: auto;
    background: gray;
}
    J'ai essayé, mais ça ne fonctionne pas pour moi: de cette façon, vous perdez le collant, pied de page, et le centrage horizontal est désactivé (trop loin vers la gauche).

    OriginalL'auteur HEDMON

  4. 0

    Votre problème est la mise en page. Vous avez besoin d'une ouverture de la div qui affiche la table. Ensuite, à l'intérieur de vous à côté d'un div qui affiche la ligne de la table. À l'intérieur de vous à côté de votre table de cellules de divs. 

    <div id="testTable">
  <div id="testRow">
    <div id="testCell"></div>
    <div id="testCell"></div>
  </div>
  <div id="testRow">
    <div id="testCell"></div>
    <div id="testCell"></div>
  </div>
 </div>

    Que devrait être la mise en page de votre divs.

    CSS comme suit.

    #testTable {
display: table;
}
#testRow {
display: table-row;
}
#testCell {
display: table-cell;
}

    Naturellement, vous ajoutez le contenu de la balise div et le formatage pour le CSS. Ce plan doit servir de ligne directrice. Si vous avez besoin d'une référence visuelle à consulter ce site. http://www.quirksmode.org/css/display.html

    Mais en fait utilise plus html pour la disposition. Mon but est de diminuer le montant de l'inutile html et css. Dans mon exemple, tout fonctionne comme je l'ai prévu, et il utilise moins de html de votre exemple.
    Aussi, il ne devrait pas être nécessaire de créer la table et de la table les éléments de ligne pour l'incorporation de la table-cell, à la différence des tableaux en html, css-tableaux, le navigateur doit rendre une table anonyme automatiquement si tous les éléments de la table sont manquants dans la hiérarchie (voir: digital-web.com/articles/everything_you_know_about_CSS_Is_wrong).
    Comment fonctionne ce regard? Pris comme beaucoup comme j'ai pu sans radicalement changer la mise en page. cssdeck.com/t/2veysdkg/20 MODIFIER je ne sais pas si vous avez besoin de garder la verticale de la balise div ou pas. Si oui, vous pouvez l'ajouter dans avec quelques légers ajustements. Si nécessaire, faites le moi savoir et je vais essayer de jouer de nouveau avec elle. EDIT2, Il semble que si vous avez besoin d'vertical vous pouvez ajouter la div est de retour et pour le css, il suffit de prendre le display: table-row; ligne et il sera toujours irréprochable
    Il semble ok, mais mon problème avec le positionnement absolu de l'en-tête et pied de page, c'est qu'il faut sortir du flux de documents, ce qui leur permet de se superposent à d'autres contenus. Aussi le positionnement relatif de l'centrée sur l'élément en % signifie qu'il n'est pas toujours parfaitement centré (uniquement à certains screenwidths/hauteurs). Ce que je suis à la recherche d'une solution qui conserve les propriétés d'origine de ma création, mais sans la table et table-cell propriétés d'affichage.
    une modification finale. Rendu compte que le pied de page a la prise de la bas de la fenêtre du navigateur, pas le bas de la page, ce qui signifie que si vous avez besoin de faire défiler puis le pied de page serait dans le milieu de la page. Cela résout le problème cssdeck.com/t/2veysdkg/27

    OriginalL'auteur Tony318

  5. 0

    À mon avis, le problème est le % de la hauteur /largeur de votre div. Eh bien, le problème ne réside pas nécessairement, mais la raison pour laquelle vous n'obtenez pas les résultats escomptés.

    Un peu comme un tableau html, le "display: table-cell" élément doit être placé dans un tableau et la rangée de table.

    Si aucun n'est trouvé, une table anonyme et la rangée de table sera créée (ce qui est dans votre code). Maintenant, le problème est que l'anonyme, le tableau sera mis à la réduction automatique du contenu.

    En outre, toute tentative de définir la taille du contenu est ignoré si c'est incompréhensible. Vous n'donner de la hauteur /largeur, sur le contenu, cependant, vous êtes maintenant en parler à votre table-cell pour prendre 100% de la table anonyme, qui n'a pas de sens pour le navigateur.

    Fondamentalement, la raison pour laquelle vous avez besoin de la table est d'aider le navigateur de déterminer intelligemment les dimensions de la zone. Vous n'avez pas à mettre sur le corps.

    Je vais vous poser la même que Gareth: comment vous simplifier (ou d'améliorer) du code, en gardant à l'esprit les exigences comme indiqué dans la question? Est-il possible d'obtenir cette mise en page de manière plus élégante?
    Personnellement, je ne voudrais pas laisser le corps de la loi sur la table. Je pense que vous pourriez sortir avec elle comme si vous avez utilisé au lieu de pixels pour cent, mais sinon, j'en ai mis un div autour de la verticale à l'acte en tant que parent et de mettre la % de la hauteur / largeur, et l'enlever de la verticale.
    Mais cela signifierait que je ne pouvais pas régler la hauteur à 100%, car ce serait pousser le pied de page de la fenêtre d'affichage du navigateur. Comment voulez-vous résoudre ce problème?
    C'est déjà un problème avec la façon dont il est maintenant. Vous ne pouvez pas avoir 100% de 100% + 2em + 2em. Si vous voulez qu'il soit liquide, j'irais tous les % et l'utilisation d'un min-height, min-largeur de la déclaration. Votre autre option pourrait être de mettre le pied de page et en-tête à la verticale comme des frères et sœurs à l'horizontale. Vous pouvez toujours vous positionner en haut / bas.
    J'ai mis le pied de page et en-tête dans une enveloppe que des frères et sœurs de la zone de contenu principal: cssdeck.com/t/2veysdkg/46, comme par votre suggestion. Où placeriez-vous display:table-cell à alignées à la verticale de la zone de contenu principal, et comment vous le tronçon de la hauteur totale à 100%?

    OriginalL'auteur MikeCruz13

  6. 0

    Essayer votre html avec css, je ne suis pas sûr à propos de la 10%, la marge du bas, mais il a travaillé con css pont.

    body, html {
    margin: 0;
    padding: 0;
}

#header {
    width: 100%;
    height: 2em;
    background: gray;
}

#vertical {
    display: table;
    width: 100%;
    height: 100%;
}

#horizontal {
    display:table;
    height: 500px;
    width: 500px;
    margin: 10% auto;
    background: gray;
}

#footer {
    height: 2em;
    width: 100%;
    background: gray;
    bottom: 0px;
}

    OriginalL'auteur Ateszki

  7. 0

    Quelque chose que je suis venu avec moi-même (qui répond à la conception/le code de demandes, et ajoute un peu de complexité/unsemantic html).

    • Pro: n'a pas besoin de la balise body pour être mis sur le display:table, et en-tête/pied de page sur le display:table-row.
    • Con: Besoins supplémentaires (unsemantic) div pour l'affichage:balise table.

    Découvrez-le ici: http://cssdeck.com/t/2veysdkg/51.

    HTML

    <!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Vertical Centering</title>
    </head>
    <body>
        <div id="header">header</div>
        <div id="table">
            <div id="tablecell">
                <div id="content">content</div>
            </div>
        </div>
        <div id="footer">footer</div>
    </body>
</html>

    CSS

    body, html {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
}

#header {
    height: 2em;
    background: gray;
}

#table {
    width: 100%;
    height: 100%;
    display: table;
    margin-top: -2em;
    margin-bottom: -2em;
}

#tablecell {
    display: table-cell;
    vertical-align: middle;
}

#content {
    height: 500px;
    width: 500px;
    margin: 2em auto 2em;
    background: gray;
}

#footer {
    height: 2em;
    width: 100%;
    background: gray;
}

    OriginalL'auteur