Aquí hay una técnica para alinear elementos en línea dentro de un padre , horizontal y verticalmente al mismo tiempo:
Alineamiento vertical
1) En este enfoque, creamos un inline-block(pseudo-) elemento como el primer (o último) hijo del padre , y configuramos su heightpropiedad 100%para tomar toda la altura de su padre .
2) Además, la suma vertical-align: middlemantiene los elementos en línea (bloque) en el medio del espacio de línea. Entonces, agregamos esa declaración CSS al primer hijo y a nuestro elemento (la imagen ) ambos.
3) Finalmente, para eliminar el carácter de espacio en blanco entre los elementos en línea (-block) , podríamos establecer el tamaño de fuente del padre en cero por font-size: 0;.
Nota: Utilicé la técnica de reemplazo de imagen de Nicolas Gallagher a continuación.
¿Cuales son los beneficios?
- El contenedor ( padre ) puede tener dimensiones dinámicas.
No es necesario especificar las dimensiones del elemento de imagen explícitamente.
Podemos usar fácilmente este enfoque para alinear un <div>elemento verticalmente también; que puede tener un contenido dinámico (alto y / o ancho). Pero tenga en cuenta que debe volver a configurar la font-sizepropiedad de divpara mostrar el texto interior. Demo en línea .
<div class="container">
<div id="element"> ... </div>
</div>
.container {
height: 300px;
text-align: center; /* align the inline(-block) elements horizontally */
font: 0/0 a; /* remove the gap between inline(-block) elements */
}
.container:before { /* create a full-height inline block pseudo=element */
content: ' ';
display: inline-block;
vertical-align: middle; /* vertical alignment of the inline element */
height: 100%;
}
#element {
display: inline-block;
vertical-align: middle; /* vertical alignment of the inline element */
font: 16px/1 Arial sans-serif; /* <-- reset the font property */
}
La salida
Contenedor receptivo
Esta sección no responderá la pregunta ya que el OP ya sabe cómo crear un contenedor receptivo. Sin embargo, explicaré cómo funciona.
Para hacer que la altura de un elemento contenedor cambie con su ancho (respetando la relación de aspecto), podríamos usar un valor porcentual para la paddingpropiedad superior / inferior .
Un valor porcentual en el margen superior / inferior o en los márgenes es relativo al ancho del bloque contenedor.
Por ejemplo:
.responsive-container {
width: 60%;
padding-top: 60%; /* 1:1 Height is the same as the width */
padding-top: 100%; /* width:height = 60:100 or 3:5 */
padding-top: 45%; /* = 60% * 3/4 , width:height = 4:3 */
padding-top: 33.75%; /* = 60% * 9/16, width:height = 16:9 */
}
Aquí está la demostración en línea . Comente las líneas desde la parte inferior y cambie el tamaño del panel para ver el efecto.
Además, podríamos aplicar la paddingpropiedad a un hijo ficticio o :before/ :afterpseudo-elemento para lograr el mismo resultado. Pero tenga en cuenta que en este caso, el valor de porcentaje en paddinges relativo al ancho de .responsive-containersí mismo.
<div class="responsive-container">
<div class="dummy"></div>
</div>
.responsive-container { width: 60%; }
.responsive-container .dummy {
padding-top: 100%; /* 1:1 square */
padding-top: 75%; /* w:h = 4:3 */
padding-top: 56.25%; /* w:h = 16:9 */
}
Demo # 1 .
Demo # 2 (Usando :afterpseudo-elemento)
Agregar el contenido
El uso de la padding-toppropiedad provoca un gran espacio en la parte superior o inferior del contenido, dentro del contenedor .
Con el fin de fijar de eso, tenemos envolver el contenido por un elemento de envoltura, eliminar ese elemento de flujo normal de documentos mediante el posicionamiento absoluto , y, finalmente, expandir la envoltura (bu usando top, right, bottomy leftpropiedades) para llenar todo el espacio de su matriz, El contenedor .
Aquí vamos:
.responsive-container {
width: 60%;
position: relative;
}
.responsive-container .wrapper {
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
}
Aquí está la demostración en línea .
Todos juntos
<div class="responsive-container">
<div class="dummy"></div>
<div class="img-container">
<img src="http://placehold.it/150x150" alt="">
</div>
</div>
.img-container {
text-align:center; /* Align center inline elements */
font: 0/0 a; /* Hide the characters like spaces */
}
.img-container:before {
content: ' ';
display: inline-block;
vertical-align: middle;
height: 100%;
}
.img-container img {
vertical-align: middle;
display: inline-block;
}
Aquí está la demostración de trabajo .
Obviamente, podría evitar el uso de ::beforepseudoelementos para la compatibilidad del navegador y crear un elemento como primer hijo de .img-container:
<div class="img-container">
<div class="centerer"></div>
<img src="http://placehold.it/150x150" alt="">
</div>
.img-container .centerer {
display: inline-block;
vertical-align: middle;
height: 100%;
}
DEMO ACTUALIZADA .
Usando max-*propiedades
Con el fin de mantener el interior la imagen de la caja de ancho menor, podría configurar max-heighty max-widthpropiedad en la imagen:
.img-container img {
vertical-align: middle;
display: inline-block;
max-height: 100%; /* <-- Set maximum height to 100% of its parent */
max-width: 100%; /* <-- Set maximum width to 100% of its parent */
}
Aquí está la DEMO ACTUALIZADA .