html - texto - Alinear verticalmente una imagen dentro de un div con altura de respuesta

centrar texto en un div

Question

Tengo el siguiente código que configura un contenedor que tiene una altura que cambia con el ancho cuando se cambia el tamaño del navegador (para mantener una relación de aspecto cuadrada).

HTML

<div class="responsive-container">
    <div class="dummy"></div>
    <div class="img-container">
        <IMG HERE>
    </div>
</div>

CSS

.responsive-container {
    position: relative;
    width: 100%;
    border: 1px solid black;
}

.dummy {
    padding-top: 100%; /* forces 1:1 aspect ratio */
}

.img-container {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

¿Cómo puedo alinear verticalmente el IMG dentro del contenedor? Todas mis imágenes tienen alturas variables y el contenedor no puede tener una altura / altura de línea fija porque responde ... ¡Por favor, ayuda!

Answer 1

¡Aquí hay una técnica que le permite centrar CUALQUIER contenido tanto vertical como horizontalmente!

Básicamente, solo necesitas dos contenedores y asegúrate de que tus elementos cumplan con los siguientes criterios.

El contenedor externo:

• debería tener display: table;

El contenedor interno:

• debería tener display: table-cell;
• debería tener vertical-align: middle;
• debería tener text-align: center;

El cuadro de contenido:

• debería tener display: inline-block;

Si usa esta técnica, solo agregue su imagen (junto con cualquier otro contenido que desee) al cuadro de contenido.

Demo:

body {
    margin : 0;
}

.outer-container {
    position : absolute;
    display: table;
    width: 100%;
    height: 100%;
    background: #ccc;
}

.inner-container {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

.centered-content {
    display: inline-block;
    background: #fff;
    padding : 12px;
    border : 1px solid #000;
}

img {
   max-width : 120px;
}

<div class="outer-container">
   <div class="inner-container">
     <div class="centered-content">
        <img src="https://i.stack.imgur.com/mRsBv.png" />
     </div>
   </div>
</div>

¡Ver también este violín !

Answer 2

Aquí hay una técnica para alinear elementos en línea dentro de un elemento primario , horizontal y verticalmente al mismo tiempo:

Alineamiento vertical

1) En este enfoque, creamos un elemento inline-block (pseudo-) como el primer (o último) elemento secundario del elemento primario , y establecemos su propiedad de height en 100% para tomar toda la altura de su elemento primario .

2) Además, al agregar vertical-align: middle mantiene los elementos en línea (-block) en el medio del espacio de la línea. Entonces, agregamos esa declaración CSS al primer hijo y nuestro elemento (la imagen ) ambos.

3) Finalmente, para eliminar el carácter de espacio en blanco entre los elementos en línea (-bloque) , 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 en lo siguiente.

¿Cuales son los beneficios?

• El contenedor ( principal ) 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 elemento <div> verticalmente ; que puede tener un contenido dinámico (alto y / o ancho). Pero tenga en cuenta que debe volver a establecer la propiedad de font-size del div para mostrar el texto interno. Demostración 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á a 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 propiedad de padding 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 . Comenta las líneas desde la parte inferior y cambia el tamaño del panel para ver el efecto.

Además, podríamos aplicar la propiedad de padding a un hijo ficticio o :before / :after pseudo-element para lograr el mismo resultado. Pero tenga en cuenta que, en este caso, el valor porcentual del padding es relativo al ancho del .responsive-container .

<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 :after pseudo-elemento)

Agregar el contenido

El uso padding-top propiedad de padding-top provoca un gran espacio en la parte superior o inferior del contenido, dentro del contenedor .

Para arreglar eso, hemos envuelto el contenido mediante un elemento envoltorio, eliminamos ese elemento del flujo normal del documento usando posicionamiento absoluto , y finalmente expandimos el envoltorio (bu usando las propiedades top , right , bottom e left ) para llenar todo el espacio de su padre, 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 .

Reuniendo todos

<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 DEMO DE TRABAJO .

Obviamente, puede evitar el uso de ::before pseudo-element para la compatibilidad del navegador y crear un elemento como el primer elemento secundario del .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 .

Usar propiedades max-*

Para mantener la imagen dentro del cuadro en un ancho inferior, puede establecer la propiedad max-height y max-width 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 .

Answer 3

Con flexbox esto es fácil:

FIDDLE

Simplemente agregue lo siguiente al contenedor de imágenes:

.img-container {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex; /* add */
    justify-content: center; /* add to align horizontal */
    align-items: center; /* add to align vertical */
}

Answer 4

Encontré este hilo en busca de una solución que:

• usa el 100% del ancho de la imagen dada
• mantiene la relación de aspecto de la imagen
• mantiene la imagen alineada verticalmente con el medio
• funciona en navegadores que no son totalmente compatibles con flex

Probando algunas de las soluciones publicadas anteriormente, no encontré ninguna que cumpliera con todos estos criterios, así que armé esta simple que podría ser útil para otras personas que necesitan hacer lo mismo:

.container {
  width: 30%;
  float: left;
  border: 1px solid turquoise;
  margin-right: 3px;
  margin-top: 3px;
}

.container:last-of-kind {
  margin-right: 0px;
}

.image-container {
  position: relative;
  overflow: hidden;
  padding-bottom: 70%;
  /* this is the desired aspect ratio */
  width: 100%;
}

.image-container img {
  position: absolute;
  /* the following 3 properties center the image on the vertical axis */
  top: 0;
  bottom: 0;
  margin: auto;
  /* uses image at 100% width (also meaning it''s horizontally center) */
  width: 100%;
}

<div class="container">
  <div class="image-container">
    <img src="http://placehold.it/800x800" class="img-responsive">
  </div>
</div>

<div class="container">
  <div class="image-container">
    <img src="http://placehold.it/800x800" class="img-responsive">
  </div>
</div>

<div class="container">
  <div class="image-container">
    <img src="http://placehold.it/800x800" class="img-responsive">
  </div>
</div>

Ejemplo de trabajo en JSFiddle

Answer 5

Haz otro div y agrega tanto ''dummy'' como ''img-container'' dentro del div

Hacer HTML y CSS de la siguiente manera

html , body {height:100%;}
.responsive-container { height:100%; display:table; text-align:center; width:100%;}
.inner-container {display:table-cell; vertical-align:middle;}

<div class="responsive-container">
    <div class="inner-container">
  <div class="dummy">Sample</div>
  <div class="img-container">
   Image tag
  </div>
 </div> 
</div>

En lugar de 100% para el ''contenedor receptivo'', puede dar la altura que desee.

Answer 6

Prueba este

  .responsive-container{
          display:table;
  }
  .img-container{
          display:table-cell;
          vertical-align: middle;
   }

Answer 7

Puede centrar una imagen, tanto horizontal como verticalmente, usando margin: auto y posicionamiento absoluto. También:

1. Es posible deshacerse del marcado adicional mediante el uso de pseudo elementos.
2. Es posible visualizar la porción media de las imágenes GRANDES utilizando los valores negativos izquierdo, superior, derecho e inferior.

.responsive-container {
  margin: 1em auto;
  min-width: 200px;       /* cap container min width */
  max-width: 500px;       /* cap container max width */
  position: relative;     
  overflow: hidden;       /* crop if image is larger than container */
  background-color: #CCC; 
}
.responsive-container:before {
  content: "";            /* using pseudo element for 1:1 ratio */
  display: block;
  padding-top: 100%;
}
.responsive-container img {
  position: absolute;
  top: -999px;            /* use sufficiently large number */
  bottom: -999px;
  left: -999px;
  right: -999px;
  margin: auto;           /* center horizontally and vertically */
}

<p>Note: images are center-cropped on &lt;400px screen width.
  <br>Open full page demo and resize browser.</p>
<div class="responsive-container">
  <img src="http://lorempixel.com/400/400/sports/9/">
</div>
<div class="responsive-container">
  <img src="http://lorempixel.com/400/200/sports/8/">
</div>
<div class="responsive-container">
  <img src="http://lorempixel.com/200/400/sports/7/">
</div>
<div class="responsive-container">
  <img src="http://lorempixel.com/200/200/sports/6/">
</div>

Answer 8

Tratar

Html

<div class="responsive-container">
     <div class="img-container">
         <IMG HERE>
     </div>
</div>

CSS

.img-container {
    position: absolute;
    top: 0;
    left: 0;
height:0;
padding-bottom:100%;
}
.img-container img {
width:100%;
}

Answer 9

Usa este CSS, ya que tienes el marcado para él:

.img-container {
    position: absolute;
    top: 50%;
    left: 50%;
}

.img-container > img {
  margin-top:-50%;
  margin-left:-50%;  
}

Aquí hay un JsBin en funcionamiento: http://jsbin.com/ihilUnI/1/edit

Esta solución solo funciona para imágenes cuadradas (porque un valor porcentual de margen superior depende del ancho del contenedor, no de la altura). Para imágenes de tamaño aleatorio, puede hacer lo siguiente:

.img-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* add browser-prefixes */
}

Solución JsBin de trabajo: http://jsbin.com/ihilUnI/2/edit

Answer 10

código HTML

<div class="image-container"> <img src=""/> </div>

código css

img
{
  position: relative;
  top: 50%;
  transform: translateY(-50%);
 }