Pourquoi width: 100% ne fonctionne-t-il pas sur div {display: table-cell}?
J'essaie de centrer verticalement et horizontalement du contenu superposant une diapositive d'image (flexslider). Il y avait des questions similaires à celle-ci, mais je n'ai pas pu trouver une solution satisfaisante qui s'appliquait directement à 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. Le seul problème est que je ne peux pas obtenir les déclarations width & height pour fonctionner sur inner-wrapper div avec le display: table-cell propriété.
Est-ce un 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%;
}
Note: le contenu centré sera supérieur à 1 élément, donc je ne peux pas utiliser l'astuce line-height.
7 réponses
Mettre display:table; à l'intérieur .outer-wrapper semblait fonctionner...
EDIT: deux Wrappers utilisant Display table Cell
Je voudrais commenter votre réponse mais j'ai trop peu de représentants : (de toute façon...
Allant votre réponse, semble être tout ce que vous devez faire est d'ajouter display:table; dans .outer-wrapper (Dejavu?), et vous pouvez vous débarrasser de table-wrapper de tout cœur.
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. Les accessoires!
Je ne vais pas poster le code source, après tout son travail de 99% timshutes, alors veuillez vous référer à sa réponse, ou simplement utiliser mon lien jsfiddle
Mise À Jour: Un Wrapper Utilisant Flexbox
Cela fait un moment, et tous les enfants cool utilisent flexbox:
<div style="display: flex; flex-direction: column; justify-content: center; align-items: center;">
stuff to be centered
</div>
Navigateur Support (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 : entrez comment vous voulez que votre contenu soit centré, et il affiche comment le faire en html et css. L'avenir est ici!
J'ai compris celui-ci. Je sais que cela aidera quelqu'un un jour.
Comment centrer verticalement et horizontalement un Div sur une Image relativement positionnée
La clé était un 3ème wrapper. Je voterais 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.
J'ai découvert que plus la valeur de 'width' est élevée, plus la largeur de la boîte est petite et vice versa. J'ai découvert cela parce que j'avais le même problème plus tôt. Donc:
.inner-wrapper {
width: 1%;
}
Résout le problème.
Bienvenue à 2017 ces jours à l'aide de vW et vH faire le tour
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>Votre 100% signifie 100% de la fenêtre, vous pouvez corriger cela en utilisant l'unité vw en plus de l'unité % à la largeur. Le problème est que 100vw est lié à la fenêtre d'affichage, en plus de % est lié à la balise parent. Faites comme ça:
.table-cell-wrapper {
width: 100vw;
height: 100%;
display: table-cell;
vertical-align: middle;
text-align: center;
}
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;
}
Il suffit d'ajouter min-height: 100% et min-width: 100% et cela fonctionnera. J'ai eu le même problème. Vous n'avez pas besoin d'un 3ème wrapper