Centrado horizontal y vertical con pseudoelemento CSS ::before 26.2.12
Centrado horizontal y vertical con pseudoelemento CSS ::before
La típica situación de alinear horizontal y verticalmente un elemento en su contenedor, ya sea el body u otro, del que se desconoce a priori su contenido y por lo tanto su altura.
La opción de posición absoluta y márgen negativo del 50% de su tamaño quedaba descartada por eso mismo, desconocer el tamaño.
La única que quedaba es utilizar el display:table y sus asociados: table-cell.
El siguiente método no es nuevo, lo vi allá por septiembre del 2011 en css-tricks
Este elemento tiene añadido el atributo de html5 contenteditable="true" por lo que puedes modificar el texto que contiene para que compruebes que al modificarlo el tamaño de la caja se mantiene centrada en su contenedor.
El código css que obra la magia es demasiado sencillo como para tener que explicarlo esta vez:
.ejemplo {
background: #E1C4BD;
text-align: center;
width: 80%;
height: 300px;
margin: 0 auto;
}
.ejemplo::before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -0.25em; /* espaciado entre .ejemplo:before y .contenido */
/* Para ver el pseudoelemento
background: #9DC425; width: 5px;
*/
}
.centrado {
display: inline-block;
vertical-align: middle;
width: 70%;
padding: 10px 15px;
border: #a0a0a0 solid 1px;
background: #f5f5f5;
text-align: left;
font-size: .9em;
font-family: monospace;
}
Kseso
the obCSServer ᛯ Ramajero Argonauta, Enredique Amanuense de CSS.#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Kseso
Me hubiera gustado que dejes el código html y explicado el css. Nunca te olvides que para vos puede ser una pavada porque tenes experiencia en el tema pero para otros no es tan fácil, por ejemplo para mi :)
ResponderEliminarHola Anónimo.
ResponderEliminarEs lo que suelo hacer. Pero en este ejemplo ¿qué explicaciones?
El código css lo tienes bien resaltado.
El html es obvio: un contenedor padre y su hijo que es el que se centra dentro del primero. Y lo tienes bien a la vista y accesible. ¿Olvidaste usar la opción de "ver código? ¿No conoces firebug o sus equivalentes?
Sobre la explicación del código:
No la hay. A no ser que desconozcas las características del valor "inline-block" y qué es y hace la propiedad vertical-align, así como qué es un pseudoelemento.
Pero no va de eso esta demo.
Y en última instancia y como primera acción ante las dudas y desconocimientos: siempre nos quedan los buscadores. De blogs como éste o de google y similares. Al menos es lo que suelo hacer yo.
De todas formas, gracias por su comentario.
Pues yo opino igual que Anónimo, sería genial si estuviese la explicación completa.
ResponderEliminarEntiendo tu punto de revisar el código del elemento o ir a buscar a google, pero sería mejor si estuviese aquí mismo y no tener que ir a buscarlo a otro lado.
A ver, Benjamín, que el código html está ahí, en el mismo ejemplo, que no se puede enmascarar. Que no es más que un div dentro de otro.
EliminarY sobre el css ¿qué explicación necesitas exáctamente?
De todas formas, gracias por la sugerencia, pero después de 23 meses de publicado el post (y 1 año del comentario al que aludes), como que no merece la pena modificar el artículo en ese aspecto.
Un saludo
Por mi parte, es exactamente la respuesta a lo que estaba buscando.
ResponderEliminarVeo que hay opiniones polémicas sobre lo expuesto: me parece que el artículo apunta a dar una solución para quien tenga cierto "background" en (al menos) HTML y CSS[3]. Quien dá aportes desde un sitio web sabe del tiempo que lleva hasta la más simple explicación, y no se puede estar partiendo siempre desde cero.
Por mi parte , gracias.