html - style - vertical align middle table css
¿Por qué el ancho: 100% no funciona en div{display: table-cell}? (7)
Intento centrar vertical y horizontalmente el contenido sobre una diapositiva de imagen (flexslider). Hubo algunas preguntas similares a esta, pero no pude encontrar una solución satisfactoria que se aplicara directamente a mi problema específico. Debido a las limitaciones de FlexSlider, no puedo usar position: absolute; en la etiqueta img en mi implementación.
Casi tengo una solución debajo de trabajar. El único problema es que no puedo hacer que las declaraciones de anchura y altura funcionen en inner-wrapper div con la display: table-cell propiedad display: table-cell .
¿Es este comportamiento estándar, o me falta algo con mi código? Si se trata de un comportamiento estándar, ¿cuál es la mejor solución para mi problema?
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%;
}
Nota: el contenido centrado será más de 1 elemento, por lo que no puedo usar el truco de altura de línea.
jsFiddle .
Descubrí que cuanto mayor es el valor de ''ancho'', menor es el ancho de la caja y viceversa. Descubrí esto porque tuve el mismo problema antes. Asi que:
.inner-wrapper {
width: 1%;
}
resuelve el problema
Me di cuenta de esto. Sé que esto ayudará a alguien algún día.
Cómo centrar vertical y horizontalmente una div sobre una imagen relativamente posicionada
La clave fue una tercera envoltura. Yo votaría cualquier respuesta que use menos envoltorios.
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;
}
Puedes ver el jsFiddle trabajo aquí.
Poniendo display:table; dentro de .outer-wrapper parecía funcionar ...
EDITAR: Dos contenedores que usan la celda de la tabla de visualización
Me gustaría comentar tu respuesta, pero tengo muy poco representante :( de todos modos ...
Saliendo de su respuesta , parece que todo lo que necesita hacer es agregar display:table; dentro de .outer-wrapper (Dejavu?), y puedes deshacerte de table-wrapper de la table-wrapper todo corazón.
Pero sí, la position:absolute te deja colocar el div sobre el img , lo leí demasiado rápido y pensé que no podrías usar la position:absolute en absoluto, pero parece que ya lo descubriste. ¡Accesorios!
No voy a publicar el código fuente, después de todo el trabajo de 99% Timshutes, así que consulte su respuesta, o simplemente use mi enlace jsfiddle
Actualización: una envoltura usando Flexbox
Ha pasado un tiempo, y todos los chicos geniales están usando flexbox:
<div style="display: flex; flex-direction: column; justify-content: center; align-items: center;">
stuff to be centered
</div>
Compatibilidad con el navegador ( source ): IE 11+, FireFox 42+, Chrome 46+, Safari 8+, iOS 8.4+ (prefijo -webkit- ), Android 4.1+ (prefijo -webkit- )
Trucos de CSS: una guía para Flexbox
Cómo centrarse en CSS : ingrese cómo desea que se centre su contenido y cómo hacerlo en html y css. ¡El futuro está aquí!
Simplemente agregue min-height: 100% y min-width: 100% y funcionará. Yo tuve el mismo problema. No necesitas una tercera envoltura
Tu 100% significa el 100% de la ventana gráfica, puedes arreglarlo usando la unidad vw además del% de la unidad en el ancho. El problema es que 100vw está relacionado con la ventana gráfica, además de que% está relacionado con la etiqueta principal. Haz así:
.table-cell-wrapper {
width: 100vw;
height: 100%;
display: table-cell;
vertical-align: middle;
text-align: center;
}
¿Qué tal esto? (jsEn enlace secundario)
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;
}
Bienvenido a 2017 en estos días usará vW y vH hacer el truco
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>