web-dev-qa-db-fra.com

Pourquoi width: 100% ne fonctionne-t-il pas sur div {display: table-cell}?

J'essaie de centrer verticalement et horizontalement du contenu superposé à une diapositive d'image (flexslider). Il y avait quelques questions similaires à celle-ci, mais je ne trouvais pas de solution satisfaisante directement applicable à mon problème spécifique. En raison des limitations de FlexSlider, je ne peux pas utiliser position: absolute; sur la balise img dans mon implémentation.

J'ai presque une solution de contournement ci-dessous de travail. Le seul problème est que je ne parviens pas à obtenir les déclarations width & height inner-wrapper div avec le display: table-cell propriété.

Est-ce comportement standard ou est-ce que je manque quelque chose avec mon code? Si c'est un comportement standard, quelle est la meilleure solution à mon problème?

[~ # ~] html [~ # ~] 

<ul>
    <li>
        <img src="#">
        <div class="outer-wrapper">
            <div class="inner-wrapper">
                <h1>My Title</h1>
                <h5>Subtitle</h5>
            </div>
        </div>
    </li>
</ul>

[~ # ~] css [~ # ~] 

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

ul {
    background: #CCC;
    height: 100%;
    width: 100%;
    list-style-position: outside;
    margin: 0; padding: 0;
}

li {
    width: 100%;
    display: table;
}

img {
    width: 100%;
    height: 410px;
}

.outer-wrapper {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    margin: 0; padding: 0;
}

.inner-wrapper {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    width: 100%;
    height: 100%;
}

Remarque: le contenu centré aura plus d'un élément, je ne peux donc pas utiliser l'astuce hauteur de ligne.

jsFiddle .

htmlcssvertical-alignmentflexslidercss-tables
62
timshutes

En mettant display:table; à l'intérieur .outer-wrapper semblait fonctionner ...

Lien JSFiddle

EDIT: deux wrappers utilisant la cellule d'affichage du tableau

Je voudrais commenter votre réponse, mais j'ai trop peu de rep :( de toute façon ...

Partir votre réponse , semble que tout ce que vous avez à faire est d’ajouter display:table; à l'intérieur .outer-wrapper (Dejavu?), Et vous pouvez vous débarrasser de table-wrapper de tout cœur.

JSFiddle

Mais oui, le position:absolute vous permet de placer le div sur le img, j'ai lu trop vite et j'ai pensé que vous ne pouviez pas utiliser position:absolute _ du tout, mais on dirait que vous l'avez déjà compris. Des accessoires!

Je ne vais pas poster le code source, après tout le travail de timshutes à 99%, alors référez-vous à sa réponse, ou utilisez simplement mon lien jsfiddle

Mise à jour: un wrapper utilisant Flexbox

Cela fait un moment, et tous les enfants cools utilisent flexbox:

<div style="display: flex; flex-direction: column; justify-content: center; align-items: center;">
    stuff to be centered
</div>

Solution complète JSFiddle

Prise en charge du navigateur ( source ): IE 11+, FireFox 42+, Chrome 46+, Safari 8+, iOS 8.4+ (-webkit- préfixe), Android 4.1+ (-webkit- préfixe)

Astuces CSS: Un guide pour Flexbox

Comment centrer en CSS : indiquez comment vous souhaitez que votre contenu soit centré et comment le faire en HTML et en CSS. L'avenir est là!

66
woojoo666

J'ai compris celui-ci. Je sais que cela aidera quelqu'un un jour.

Comment centrer verticalement et horizontalement une div sur une image relativement positionnée

La clé était un 3ème emballage. Je voterais n'importe quelle réponse qui utilise moins de wrappers.

HTML

<div class="wrapper">
    <img src="my-slide.jpg">
    <div class="outer-wrapper">
        <div class="table-wrapper">
            <div class="table-cell-wrapper">
                <h1>My Title</h1>
                <p>Subtitle</p>
            </div>
        </div>
    </div>
</div>

CSS

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

ul {
    width: 100%;
    height: 100%;
    list-style-position: outside;
    margin: 0; padding: 0;
}

li {
    width: 100%;
    display: table;
}

img {
    width: 100%;
    height: 100%;
}

.outer-wrapper {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  margin: 0; padding: 0;
}

.table-wrapper {
  width: 100%;
  height: 100%;
  display: table;
  vertical-align: middle;
  text-align: center;
}

.table-cell-wrapper {
  width: 100%;
  height: 100%;  
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

Vous pouvez voir le travail jsFiddle ici.

12
timshutes

Bienvenue en 2017 ces jours-ci utiliseront vW et vH feront l'affaire

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

ul {
    background: #CCC;
    height: 100%;
    width: 100%;
    list-style-position: outside;
    margin: 0; padding: 0;
}

li {
    width: 100%;
    display: table;
}

img {
    width: 100%;
    height: 410px;
}

.outer-wrapper {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    margin: 0; padding: 0;
}

.inner-wrapper {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    width: 100vw; /* only change is here "%" to "vw" ! */
    height: 100vh; /* only change is here "%" to "vh" ! */
}
<ul>
    <li>
        <img src="#">
        <div class="outer-wrapper">
            <div class="inner-wrapper">
                <h1>My Title</h1>
                <h5>Subtitle</h5>
            </div>
        </div>
    </li>
</ul>
6
caramba

J'ai découvert que plus la valeur de 'width' est élevée, plus la largeur de la boîte est réduite et inversement. J'ai découvert cela parce que j'avais le même problème plus tôt. Alors:

.inner-wrapper {
    width: 1%;
}

résout le problème.

6
user7508996

Votre 100% signifie 100% de la fenêtre, vous pouvez y remédier en utilisant l'unité vw en plus du% unité à la largeur. Le problème est que 100vw est lié à la fenêtre d'affichage, outre que% est lié à la balise parent. Faire comme ça:

.table-cell-wrapper {
    width: 100vw;
    height: 100%;  
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}
1
Derzu

et à propos de ça? (Lien jsFiddle)

CSS

ul {
    background: #CCC;
    height: 1000%;
    width: 100%;
    list-style-position: outside;
    margin: 0; padding: 0;
    position: absolute;
}
li {
 background-color: #EBEBEB;
    border-bottom: 1px solid #CCCCCC;
    border-right: 1px solid #CCCCCC;
    display: table;
    height: 180px;
    overflow: hidden;
    width: 200px;
}
.divone{
    display: table-cell;
    margin: 0 auto;
    text-align: center;
    vertical-align: middle;
    width: 100%; 

}
img {
    width: 100%;
    height: 410px;
}
.wrapper {
  position: absolute;
}
0
Hushme