Pourquoi est-width: 100% ne travaillent pas sur les div {display: table-cell}?

Je suis en train de verticalement et horizontalement centre de certains contenus en superposition d'une image de la diapositive (flexslider). Il y avait des questions similaires à celui-ci, mais je ne pouvais pas trouver une solution satisfaisante qui est appliqué directement à mon problème. En raison des limitations de FlexSlider, je ne peux pas utiliser position: absolute; sur la balise img dans mon œuvre.

J'ai presque solution de contournement ci-dessous travail. Le seul problème est que je ne peut pas obtenir la largeur & hauteur déclarations de travailler sur inner-wrapper div avec la display: table-cell de la propriété.

Est ce comportement standard, ou ai-je raté quelque chose avec mon code? Si c'est le 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: l'centrée sur le contenu sera plus que de 1 élément, donc je ne peux pas utiliser la hauteur de la ligne de truc.

jsFiddle.

InformationsquelleAutor timshutes | 2013-07-19

66

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

JSFiddle Lien

EDIT: Deux papiers d'emballage à l'Aide de l'Affichage d'une Cellule de Tableau

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

Aller hors votre réponse, on dirait que tout ce que vous devez faire est d'ajouter display:table; à l'intérieur de .outer-wrapper (Dejavu?), et vous pouvez se débarrasser de table-wrapper de tout coeur.

JSFiddle

Mais ouais, le position:absolute vous permet de placer le div sur le img, j'ai lu trop vite et pensé que vous ne pouviez pas utiliser position:absolute à tous, mais il semble que vous avez compris déjà. Des accessoires!

Je ne vais pas poster le code source, après toutes ses 99% timshutes de travail, reportez-vous donc à sa réponse, ou tout simplement utiliser mon jsfiddle lien

Mise À Jour: Un Wrapper À L'Aide De Flexbox

Ça fait un moment, et tous les cool kids sont à l'aide de flexbox:
```
<div style="display: flex; flex-direction: column; justify-content: center; align-items: center;">
    stuff to be centered
</div>
```
Plein JSFiddle Solution

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)

CSS Astuces: un Guide pour Flexbox

Comment faire pour centrer en CSS: entrée comment vous voulez que votre contenu à être centré, et c'sorties comment le faire en html et css. L'avenir est ici!
- J'ai besoin de le texte ci - dessus superposé à l'image.
- Convient de noter que la flexbox centrage se comporte de drôle quand vous venez du centre de texte en ligne avec le balisage – ce qui se fait traiter comme une inline-block élément.
- ça fait un moment, mais cette réponse est mieux que ma réponse originale à cette question. Merci pour cette!
InformationsquelleAutor woojoo666

J'ai pensé que celui-ci dehors. Je sais que cela va aider quelqu'un un jour.

Comment Verticalement & Horizontalement Centre d'une Div Sur une position relative de l'Image

La clé était dans une 3ème enveloppe. Je vote toute réponse qui utilise moins d'emballages.

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.

InformationsquelleAutor timshutes

Bienvenue à 2017 ces jours à l'aide de vW et vH faire le tour

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: 100vw; /* only change is here "%" to "vw" ! */
    height: 100vh; /* only change is here "%" to "vh" ! */
}

HTML:

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

InformationsquelleAutor caramba

5

J'ai découvert que plus la valeur de 'width' est grande, plus la largeur de la boîte est faite, et vice-versa. J'ai trouvé ce parce que j'ai eu le même problème plus tôt. Donc:
```
.inner-wrapper {
    width: 1%;
}
```
résout le problème.
- Bienvenue sur StackOverflow! Alors que les réponses sont toujours appréciés, cette question a été posée il y a 3 ans, et avait déjà une solution retenue. S'il vous plaît essayez d'éviter de "bumping" questions de haut en apportant des réponses, à moins que la question n'était pas déjà marqué comme résolu, ou vous avez trouvé une considérablement meilleure approche alternative à ce problème 🙂
InformationsquelleAutor user7508996
1

Votre 100% signifie que 100% de la fenêtre d'affichage, vous pouvez corriger cela en utilisant la vw unité en plus de l' % unité de largeur. Le problème est que 100vw est liée à la fenêtre d'affichage, en plus de % est liée à une balise parent. Faites comme suit:
```
.table-cell-wrapper {
    width: 100vw;
    height: 100%;  
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}
```
InformationsquelleAutor Derzu

Comment à ce sujet? (jsFiddle lien)

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

cette solution résout l'alignement horizontal, mais pas l'alignement vertical (qui je veux aussi centré). Aussi, il vient se coller dans mon esprit qu'il n'est pas recommandé de mettre un flotteur à l'intérieur d'une table-cell élément. Qui pourrait ne pas être vrai que l'.
vous souhaitez div contenu centré?
Ne pas le faire là encore... le texte est bottes les plus à gauche. Je voulais qu'il soit centré. J'ai enfin résolu ce problème. Vous pouvez voir la solution ici: jsfiddle.net/timshutes/5pAA3/6 ou dans la réponse ci-dessus.

InformationsquelleAutor Hushme

-1

Juste ajouter min-height:100% et min-width:100% et il va fonctionner. J'ai eu le même problème. Vous n'avez pas besoin d'un 3ème wrapper

InformationsquelleAutor Cardinale

Vous devez vous connecter pour publier un commentaire.