imagen - centrar texto vertical y horizontal css
Flexbox no se centra verticalmente en IE (8)
Encontré que, por ejemplo, el navegador tiene problemas para alinear verticalmente los contenedores internos, cuando solo se establece el estilo de altura mínima o cuando falta el estilo de altura. Lo que hice fue agregar estilo de altura con algún valor y eso me solucionó el problema.
por ejemplo :
.outer
{
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
/* Center vertically */
align-items: center;
/*Center horizontaly */
justify-content: center;
/*Center horizontaly ie */
-ms-flex-pack: center;
min-height: 220px;
height:100px;
}
Así que ahora tenemos el estilo de altura, pero la altura mínima lo sobrescribirá. De esa manera, es feliz y aún podemos usar min-height.
Espero que esto sea útil para alguien.
Tengo una página web simple con algunos contenidos de Lipsum centrados en la página. La página funciona bien en Chrome y Firefox. Si reduzco el tamaño de la ventana, el contenido llena la ventana hasta que no puede y luego agrega una barra de desplazamiento y llena el contenido de la pantalla, hacia la parte inferior.
Sin embargo, la página no se centra en IE11. Puedo hacer que la página se centre en IE flexionando el cuerpo, pero si lo hago, entonces el contenido comienza a salir de la pantalla hacia la parte superior y corta la parte superior del contenido.
A continuación están los dos escenarios. Ver los violines asociados. Si el problema no es evidente de inmediato, reduzca el tamaño de la ventana de resultados para que se vea forzado a generar una barra de desplazamiento.
Nota: Esta aplicación solo está orientada a las últimas versiones de Firefox, Chrome e IE (IE11), todas compatibles con la Recomendación de Flexbox candidata , por lo que la compatibilidad de funciones no debería ser un problema (en teoría).
Editar : cuando se utiliza la API de pantalla completa para pantalla completa del div externo, todos los navegadores se centran correctamente utilizando el CSS original. Sin embargo, al salir del modo de pantalla completa, IE vuelve a estar centrado de forma vertical y alineado verticalmente en la parte superior.
Editar : IE11 utiliza la implementación de Flexbox no específica de un proveedor. Actualizaciones de diseño de caja flexible ("Flexbox")
Se centra y cambia el tamaño correctamente en Chrome / FF, no se centra pero cambia el tamaño correctamente en IE11
Fiddle: http://jsfiddle.net/Dragonseer/3D6vw/
html, body
{
height: 100%;
width: 100%;
}
body
{
margin: 0;
}
.outer
{
min-width: 100%;
min-height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.inner
{
width: 80%;
}
Centros correctamente en todas partes, corta la parte superior cuando se reduce su tamaño
Fiddle: http://jsfiddle.net/Dragonseer/5CxAy/
html, body
{
height: 100%;
width: 100%;
}
body
{
margin: 0;
display: flex;
}
.outer
{
min-width: 100%;
min-height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.inner
{
width: 80%;
}
Encontré una buena solución que funcionó para mí, consulte este enlace https://codepen.io/chriswrightdesign/pen/emQNGZ/?editors=1100 Primero, agregamos un div principal, luego cambiamos la altura mínima: 100% a min- altura: 100vh. Funciona a las mil maravillas.
// by having a parent with flex-direction:row,
// the min-height bug in IE doesn''t stick around.
.flashy-content-outer {
display:flex;
flex-direction:row;
}
.flashy-content-inner {
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
min-width:100vw;
min-height:100vh;
padding:20px;
box-sizing:border-box;
}
.flashy-content {
display:inline-block;
padding:15px;
background:#fff;
}
Este es un error conocido que parece haber sido reparado internamente en Microsoft.
He actualizado ambos violines. Espero que haga su trabajo.
html, body
{
height: 100%;
width: 100%;
}
body
{
margin: 0;
}
.outer
{
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.inner
{
width: 80%;
margin: 0 auto;
}
html, body
{
height: 100%;
width: 100%;
}
body
{
margin: 0;
display:flex;
}
.outer
{
min-width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.inner
{
width: 80%;
margin-top:40px;
margin: 0 auto;
}
Intenta envolver cualquier div que tengas en flexboxed con flex-direction: column en un contenedor que también tenga flexboxed.
Acabo de probar esto en IE11 y funciona. Una solución extraña, pero hasta que Microsoft haga que su corrección de errores interna sea externa ... ¡tendrá que funcionar!
HTML:
<div class="FlexContainerWrapper">
<div class="FlexContainer">
<div class="FlexItem">
<p>I should be centered.</p>
</div>
</div>
</div>
CSS:
html, body {
height: 100%;
}
.FlexContainerWrapper {
display: flex;
flex-direction: column;
height: 100%;
}
.FlexContainer {
align-items: center;
background: hsla(0,0%,0%,.1);
display: flex;
flex-direction: column;
justify-content: center;
min-height: 100%;
width: 600px;
}
.FlexItem {
background: hsla(0,0%,0%,.1);
box-sizing: border-box;
max-width: 100%;
}
2 ejemplos para probar en IE11: http://codepen.io/philipwalton/pen/JdvdJE http://codepen.io/chriswrightdesign/pen/emQNGZ/
No tengo mucha experiencia con Flexbox pero me parece que la altura forzada en las etiquetas html y body hace que el texto desaparezca en la parte superior cuando se cambia de tamaño-- No pude probar en IE pero encontré el mismo efecto en Chrome.
Bifurqué tu violín y eliminé las declaraciones de height y width .
body
{
margin: 0;
}
También parecía que los ajustes de flex deben aplicar a otros elementos de flex . Sin embargo, la aplicación de display: flex al .inner causó problemas, por lo que establecí explícitamente el .inner para display: block y configurar el .outer a flex para el posicionamiento.
Establecí la altura mínima de .outer para llenar la ventana .outer , la display: flex y establezco la alineación horizontal y vertical:
.outer
{
display:flex;
min-height: 100%;
min-height: 100vh;
align-items: center;
justify-content: center;
}
Configuro .inner para display: block explícitamente. En Chrome, parecía que heredaba flex de .outer . También establecí el ancho:
.inner
{
display:block;
width: 80%;
}
Esto solucionó el problema en Chrome, con suerte podría hacer lo mismo en IE11. Aquí está mi versión del violín: http://jsfiddle.net/ToddT/5CxAy/21/
Si puede definir el ancho y alto de los padres, hay una manera más simple de centralizar la imagen sin tener que crear un contenedor para ella.
Por alguna razón, si defines el ancho mínimo, IE también reconocerá el ancho máximo.
Esta solución funciona para IE10 +, Firefox y Chrome.
<div>
<img src="http://placehold.it/350x150"/>
</div>
div {
display: -ms-flexbox;
display: flex;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-align: center;
align-items: center;
border: 1px solid orange;
width: 100px;
height: 100px;
}
img{
min-width: 10%;
max-width: 100%;
min-height: 10%;
max-height: 100%;
}
Solo en caso de que alguien llegue aquí con el mismo problema que tuve, que no se trata específicamente en comentarios anteriores.
Tenía margin: auto en el elemento interno que hacía que se adhiriera a la parte inferior de su elemento primario (o el elemento externo). Lo que lo solucionó fue cambiar el margen al margin: 0 auto; .