Cómo alinear verticalmente una imagen dentro de un div

1457

¿Cómo se puede alinear una imagen dentro de un contenedor div ?

Ejemplo

En mi ejemplo, necesito centrar verticalmente <img>el <div>con class ="frame":

<div class="frame" style="height: 25px;">
    <img src="http://jsfiddle.net/img/logo.png" />
</div>

.frameLa altura es fija y la altura de la imagen es desconocida. Puedo agregar nuevos elementos en.frame si esa es la única solución. Estoy tratando de hacer esto en Internet Explorer 7 y posterior, WebKit, Gecko.

Vea el jsfiddle aquí .

.frame {
    height: 25px;      /* Equals maximum image height */
    line-height: 25px;
    width: 160px;
    border: 1px solid red;

    text-align: center;
    margin: 1em 0;
}
img {
    background: #3A6F9A;
    vertical-align: middle;
    max-height: 25px;
    max-width: 160px;
}

<div class=frame>
   <img src="http://jsfiddle.net/img/logo.png" height=250 />
</div>
<div class=frame>
   <img src="http://jsfiddle.net/img/logo.png" height=25 />
</div>
<div class=frame>
   <img src="http://jsfiddle.net/img/logo.png" height=23 />
</div>
<div class=frame>
   <img src="http://jsfiddle.net/img/logo.png" height=21 />
</div>
<div class=frame>
   <img src="http://jsfiddle.net/img/logo.png" height=19 />
</div>
<div class=frame>
    <img src="http://jsfiddle.net/img/logo.png" height=17 />
</div>
<div class=frame>
    <img src="http://jsfiddle.net/img/logo.png" height=15 />
 </div>
<div class=frame>
    <img src="http://jsfiddle.net/img/logo.png" height=13 />
 </div>
<div class=frame>
    <img src="http://jsfiddle.net/img/logo.png" height=11 />
 </div>
<div class=frame>
    <img src="http://jsfiddle.net/img/logo.png" height=9 />
 </div>
<div class=frame>
    <img src="http://jsfiddle.net/img/logo.png" height=7 />
 </div>
<div class=frame>
    <img src="http://jsfiddle.net/img/logo.png" height=5 />
 </div>
<div class=frame>
    <img src="http://jsfiddle.net/img/logo.png" height=3 />
 </div>

Expandir fragmento

css image vertical-alignment Arnaud Le Blanc
fuente

3

Hola, lo siento, pero no estoy de acuerdo con que usar una ayuda aquí sea la solución más valorada. Pero no es la única forma. Otros son los mismos compatibles con los navegadores. Ofrezco una solución aquí, stackoverflow.com/a/43308414/7733724 y W3C.org sobre información. Podrías comprobarlo. Saludos

Sam

El artículo de Reading Centering Things sobre W3C será útil: w3.org/Style/Examples/007/center.en.html

QMaster

Guía perfecta para alinear css-tricks.com/centering-css-complete-guide

Michael Yurin

2128

La única forma (y la mejor entre navegadores) que conozco es usar un inline-blockayudante con height: 100%yvertical-align: middle en ambos elementos.

Entonces hay una solución: http://jsfiddle.net/kizu/4RPFa/4570/

Mostrar fragmento de código

.frame {
    height: 25px;      /* Equals maximum image height */
    width: 160px;
    border: 1px solid red;
    white-space: nowrap; /* This is required unless you put the helper span closely near the img */

    text-align: center;
    margin: 1em 0;
}

.helper {
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

img {
    background: #3A6F9A;
    vertical-align: middle;
    max-height: 25px;
    max-width: 160px;
}

<div class="frame">
    <span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=250px />
</div>
<div class="frame">
    <span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=25px />
</div>
<div class="frame">
    <span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=23px />
</div>
<div class="frame">
    <span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=21px />
</div>
<div class="frame">
    <span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=19px />
</div>
<div class="frame">
    <span class="helper"></span>
    <img src="http://jsfiddle.net/img/logo.png" height=17px />
</div>
<div class="frame">
    <span class="helper"></span>
    <img src="http://jsfiddle.net/img/logo.png" height=15px />
</div>
<div class="frame">
    <span class="helper"></span>
    <img src="http://jsfiddle.net/img/logo.png" height=13px />
</div>
<div class="frame">
    <span class="helper"></span>
    <img src="http://jsfiddle.net/img/logo.png" height=11px />
</div>
<div class="frame">
    <span class="helper"></span>
    <img src="http://jsfiddle.net/img/logo.png" height=9px />
</div>
<div class="frame">
    <span class="helper"></span>
    <img src="http://jsfiddle.net/img/logo.png" height=7px />
</div>
<div class="frame">
    <span class="helper"></span>
    <img src="http://jsfiddle.net/img/logo.png" height=5px />
</div>
<div class="frame">
    <span class="helper"></span>
    <img src="http://jsfiddle.net/img/logo.png" height=3px />
</div>

Expandir fragmento

O, si no desea tener un elemento adicional en los navegadores modernos y no le importa usar expresiones de Internet Explorer, puede usar un pseudo-elemento y agregarlo a Internet Explorer usando una expresión conveniente, que se ejecuta solo una vez por elemento , por lo que no habrá problemas de rendimiento:

La solución con :beforey expression()para Internet Explorer: http://jsfiddle.net/kizu/4RPFa/4571/

Mostrar fragmento de código

.frame {
    height: 25px;      /* Equals maximum image height */
    width: 160px;
    border: 1px solid red;
    white-space: nowrap;

    text-align: center;
    margin: 1em 0;
}

.frame:before,
.frame_before {
    content: "";
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

img {
    background: #3A6F9A;
    vertical-align: middle;
    max-height: 25px;
    max-width: 160px;
}

/* Move this to conditional comments */
.frame {
    list-style:none;
    behavior: expression(
        function(t){
            t.insertAdjacentHTML('afterBegin','<span class="frame_before"></span>');
            t.runtimeStyle.behavior = 'none';
        }(this)
    );
}

<div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=250px /></div>
<div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=25px /></div>
<div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=23px /></div>
<div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=21px /></div>
<div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=19px /></div>
<div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=17px /></div>
<div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=15px /></div>
<div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=13px /></div>
<div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=11px /></div>
<div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=9px /></div>
<div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=7px /></div>
<div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=5px /></div>
<div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=3px /></div>

Expandir fragmento

Cómo funciona:

Cuando tienes dos inline-blockelementos cerca uno del otro, puedes alinearlos al lado del otro, por vertical-align: middlelo que obtendrás algo como esto:
Cuando se tiene un bloque con altura fija (en px, emo de otra unidad absoluta), se puede ajustar la altura de los bloques interiores en% .
Entonces, agregar uno inline-blockcon height: 100%un bloque con altura fija alinearía otro inline-blockelemento en él ( <img/>en su caso) verticalmente cerca de él.

kizu
fuente

2

Puede verlo usted mismo: jsfiddle.net/kizu/Pw9NL : solo los cuadros en línea no generan un cuadro, pero todos los demás casos funcionan bien.

kizu

3

Muy buena respuesta. Estaba luchando con los espacios entre los elementos de bloque en línea, es decir, entre .framey .frame:before. Una solución propuesta aquí es agregar margin-left: -4pxa .frame. Espero que esto ayude.

Mick

111

PONGA ATENCIÓN de que: <img src=""/>NO está dentro del <span></span>ayudante que se agregó. Esta afuera. Estuve a punto de tirar de cada mechón de mi cabello al no darme cuenta de esto.

Ryan

50

Parece que también necesita agregar "white-space: nowrap;" al marco o se encontrará con un problema si tiene un salto de línea entre su imagen y el intervalo auxiliar. Me tomó una hora por qué esta solución no funcionaba para mí.

juminoz

2

En mi caso, mi imagen tenía la altura máxima y la anchura máxima ambas establecidas al 100% para que la imagen escalara el contenedor, y este método no funcionó. Mi solución fue cambiar estos valores al 90% (que en mi caso estaba bien; en otra situación, es posible que deba escalar el contenedor en consecuencia), y también agregar un ayudante al otro lado de la imagen para que el relleno permanezca incluso en ambos lados.

Eric Dubé

513

Esto puede ser útil:

div {
    position: relative;
    width: 200px;
    height: 200px;
}
img {
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
}
.image {
    min-height: 50px
}

Tahir Yasin
fuente

74

Si desea alinear también horizontalmente la imagen, agregue a la izquierda: 0; derecha: 0; img

jameskind 02 de

¿este no funciona en IE10? Estoy usando esto por todas partes

Max Yari

También funciona (para mí) con contenedor div que tieneposition:fixed;

PJ Brunet

1

¡La solución más fácil y limpia gracias!

KDT

¡Gracias! ¡¡Trabajó para mi!!

Alexander Malygin

486

La solución de matejkramny es un buen comienzo, pero las imágenes de gran tamaño tienen una proporción incorrecta.

Aquí está mi tenedor:

Demostración: https://jsbin.com/lidebapomi/edit?html,css,output

avance

HTML:

<div class="frame">
  <img src="foo"/>
</div>

CSS:

.frame {
    height: 160px; /* Can be anything */
    width: 160px; /* Can be anything */
    position: relative;
}
img {
    max-height: 100%;
    max-width: 100%;
    width: auto;
    height: auto;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

jomo
fuente

¿Alguna forma de adaptar esto para poder hacer zoom en la imagen de gran tamaño, digamos 2x, y aún así permanecerá centrada horizontal y verticalmente?

Justin

Si queremos que funcione para alinear verticalmente el fondo en lugar del medio, ¿qué códigos deberían modificarse?

bobo

1

@bobo solo elimina el top: 0;. Esto da como resultado que solo bottom: 0;se aplique verticalmente.

jomo

La mejor respuesta!

user315338

278

Una solución de tres líneas:

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

Esto se aplica a cualquier cosa.

A partir de aquí .

Jorge Orpinel
fuente

Prefijos: -ms- o -webkit- (antes de la transformación). w3schools.com/cssref/css3_pr_transform.asp

Jorge Orpinel

3

Prefijos para IE9, pero no funciona en absoluto en IE8 y versiones inferiores: caniuse.com/#search=transform Pero mi opinión: no me importa IE8

Reign.85

Nadie se dio cuenta de lo que sucede cuando el niño a centrar es más alto que la pantalla del dispositivo y el padre es el primer niño en DOM ...?

tao

3

Agradable cuando no puedes usarlo position: absolute;porque necesitas un ancho fluido.

plong0

2

La mejor solución hasta ahora, incluso mejor que Flexbox, con soporte para la mayoría de los navegadores modernos y antiguos. Vota esto por favor

albanx

142

Una solución CSS pura :

.frame {
  margin: 1em 0;
  height: 35px;
  width: 160px;
  border: 1px solid red;
  position: relative;
}

img {
  max-height: 25px;
  max-width: 160px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  background: #3A6F9A;
}

<div class=frame>
  <img src="http://jsfiddle.net/img/logo.png" height=250 />
</div>
<div class=frame>
  <img src="http://jsfiddle.net/img/logo.png" height=25 />
</div>
<div class=frame>
  <img src="http://jsfiddle.net/img/logo.png" height=23 />
</div>
<div class=frame>
  <img src="http://jsfiddle.net/img/logo.png" height=21 />
</div>
<div class=frame>
  <img src="http://jsfiddle.net/img/logo.png" height=19 />
</div>
<div class=frame>
  <img src="http://jsfiddle.net/img/logo.png" height=17 />
</div>
<div class=frame>
  <img src="http://jsfiddle.net/img/logo.png" height=15 />
</div>
<div class=frame>
  <img src="http://jsfiddle.net/img/logo.png" height=13 />
</div>
<div class=frame>
  <img src="http://jsfiddle.net/img/logo.png" height=11 />
</div>
<div class=frame>
  <img src="http://jsfiddle.net/img/logo.png" height=9 />
</div>
<div class=frame>
  <img src="http://jsfiddle.net/img/logo.png" height=7 />
</div>
<div class=frame>
  <img src="http://jsfiddle.net/img/logo.png" height=5 />
</div>
<div class=frame>
  <img src="http://jsfiddle.net/img/logo.png" height=3 />
</div>

Expandir fragmento

Cosas clave

// position: relative; - in .frame holds the absolute element within the frame
// top: 0; bottom: 0; left: 0; right: 0; - this is key for centering a component
// margin: auto; - centers the image horizontally & vertically

Matej
fuente

Permítame recomendarle una guía aquí que incluso funciona para IE5 (deduciendo de lo que he leído hasta ahora en la publicación) webmasterworld.com/css/3350566.htm

Matej

esta solución es un buen comienzo, pero las imágenes de gran tamaño se redimensionan con una proporción incorrecta . Por favor mira mi respuesta.

Jomo

@ HansWürstchen, sí, pero el punto es centrarse, si se sobredimensiona es la elección del diseño. Agregar más css = más desorden :)

Matej

1

@matejkramny no se sobredimensiona. Si la imagen es demasiado grande, tiene una proporción incorrecta. eso significa que se estira en altura y no se ve correctamente.

jomo

✔ Wow, esto funciona con imágenes desbordantes (más grandes que el contenedor), la respuesta aceptada no.

Cedric Reichenbach

120

Para una solución más moderna, y si no hay necesidad de admitir navegadores heredados, puede hacer esto:

.frame {
    display: flex;
    /**
    Uncomment 'justify-content' below to center horizontally.
    ✪ Read below for a better way to center vertically and horizontally.
    **/

    /* justify-content: center; */
    align-items: center;
}

img {
    height: auto;

    /**
    ✪ To center this image both vertically and horizontally,
    in the .frame rule above comment the 'justify-content'
    and 'align-items' declarations,
    then  uncomment 'margin: auto;' below.
    **/

    /* margin: auto; */
}

/* Styling stuff not needed for demo */
.frame {
    max-width: 900px;
    height: 200px;
    margin: auto;
    background: #222;
}
p {
    max-width: 900px;
    margin: 20px auto 0;
}
img {
    width: 150px;
}

<div class="frame">
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/9988/hand-pointing.png">
</div>

Expandir fragmento

Aquí hay un bolígrafo: http://codepen.io/ricardozea/pen/aa0ee8e6021087b6e2460664a0fa3f3e

Ricardo Zea
fuente

3

Esto es especialmente útil si no se establece la altura del contenedor

Dave Barnett

o align-selfpara artículos individuales

Michael

El problema align-selfes que los elementos flexibles estirarán la altura del contenedor principal.

Ricardo Zea

101

De esta manera, puede centrar una imagen verticalmente ( demostración ):

div{
  height: 150px; // Internet Explorer 7 fix
  line-height: 150px;
}
img{
  vertical-align: middle;
  margin-bottom: 0.25em;
}

Peter Mortensen
fuente

44

Curiosamente no pude obtener la respuesta aceptada para trabajar en mi situación (también estaba recortando la imagen con desbordamiento: oculto). Sin embargo, esto funcionó perfectamente.

Luca Spiller

3

Solo he probado esto en Chrome, pero la altura de la línea parece ser la clave. Sin embargo, puse el atributo de alineación vertical en el div en lugar del img, ya que mi img está dentro de un ancla (<a/>).

Precio de Todd

1

Sí, mucho más simple que la solución aceptada, y funciona de maravilla. También encontré esta solución en jsfiddle.

vdboor

1

Si sabe qué alturas para atender, esto funciona bastante bien

KrekkieD

Desde mi experiencia, esta solución solo funciona font-size: 0para div. Para contenedores bastante grandes, puede perderse, pero si su divtamaño es de 100 px y el de img es de 80 px, será unos pocos píxeles más bajo.

alTus

38

Además, puede usar Flexbox para lograr el resultado correcto:

.parent {
  align-items: center; /* For vertical align */
  background: red;
  display: flex;
  height: 250px;
  /* justify-content: center; <- for horizontal align */
  width: 250px;
}

<div class="parent">
  <img class="child" src="https://cdn2.iconfinder.com/data/icons/social-icons-circular-black/512/stackoverflow-128.png" />
</div>

Expandir fragmento

torniquete
fuente

28

¡Hay una solución súper fácil con flexbox!

.frame {
    display: flex;
    align-items: center;
}

BBlackwo
fuente

55

Sí, pero casi no se puede ver en todas las respuestas. Intenté resaltarlo de manera simple y clara, ya que es una solución mucho más fácil que todas las otras respuestas.

BBlackwo

Esta es la mejor respuesta que también funcionó para mí. Pero en mi caso en el cuadro "inline-flex" funcionó mejor para mí. y para la imagen en su interior agregué: "vertical-align: middle".

Sophie Cooperman el

22

Podría intentar configurar el CSS de PI en display: table-cell; vertical-align: middle;

Yeodave
fuente

He visto varios métodos, pero este era nuevo (incluso en 2013) para mí.

Mike Ebert

Mejor que poner la imagen dentro de una mesa solo para centrarla.

Jonats

3

display: table-cell no siempre dimensiona correctamente si desea que el ancho sea del 100%

Redtopia

1

¿Qué es " PI"?

Peter Mortensen

18

Puedes probar el siguiente código:

.frame{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

<div class="frame" style="height: 25px;">
    <img src="http://jsfiddle.net/img/logo.png" />
</div>

Expandir fragmento

Santosh Khalse
fuente

14

Solución de imagen de fondo

Eliminé el elemento de imagen por completo y lo configuré como fondo del div con una clase de .frame

http://jsfiddle.net/URVKa/2/

Esto al menos funciona bien en Internet Explorer 8, Firefox 6 y Chrome 13.

Lo comprobé y esta solución no funcionará para reducir imágenes de más de 25 píxeles de altura. Hay una propiedad llamada background-sizeque establece el tamaño del elemento, pero es CSS 3 lo que entraría en conflicto con los requisitos de Internet Explorer 7.

Le aconsejaría que rehaga las prioridades y el diseño de su navegador para los mejores navegadores disponibles, u obtenga un código del lado del servidor para cambiar el tamaño de las imágenes si desea utilizar esta solución.

Benjamin Udink ten Cate
fuente

Muy buena solución, sin embargo, espero que algunas imágenes sean más grandes que el contenedor, y en este caso planeé usar max-height / max-width en ellas. ¿Alguna forma de hacer esto con imágenes de fondo?

Arnaud Le Blanc

esto no es un "elemento .frame", es un "div con una clase de .frame"

JGallardo

Si la altura de la imagen no excede la altura del marco div, esta es la mejor y más simple solución ...

desde el

13

Imagina que tienes

<div class="wrap">
    <img src="#">
</div>

Y css:

.wrap {
    display: flex;
}
.wrap img {
    object-fit: contain;
}

fdrv
fuente

Uau! Flex realmente rulzzzz! ¡Gracias!

Pedro Ferreira

use la cubierta de ajuste de objetos si desea que el niño ocupe todo el ancho del padre y aún así esté alineado verticalmente al centro. Ver css-tricks.com/snippets/css/a-guide-to-flexbox para mover la imagen en el padre usando flex-box

mattdlockyer

11

Podrías hacer esto:

Manifestación

http://jsfiddle.net/DZ8vW/1

CSS

.frame {
    height: 25px;      /* Equals maximum image height */
    line-height: 25px;
    width: 160px;
    border: 1px solid red;

    text-align: center; 
    margin: 1em 0;
    position: relative; /* Changes here... */
}
img {
    background: #3A6F9A;
    max-height: 25px;
    max-width: 160px;
    top: 50%;           /* Here.. */
    left: 50%;          /* Here... */
    position: absolute; /* And here */
}

JavaScript

$("img").each(function(){
    this.style.marginTop = $(this).height() / -2 + "px";
})

Joseph Marikle
fuente

Agradable. ¿Alguna posibilidad de una solución de CSS puro?

Arnaud Le Blanc

Lamentablemente, no, a menos que desee utilizar tablas o dejar de compatibilidad con versiones anteriores de IE. :( Si supieras el tamaño exacto de las imágenes de

antemano

@Joseph ¿Cómo lo arreglarías con tablas?

Benjamin Udink ten Cate

@Benjamin Udink ten Cate Es desordenado, pero podría hacerse de esta manera: jsfiddle.net/DZ8vW/2 (esto no se recomienda, pero debería funcionar)

Joseph Marikle

1

Bueno, se adapta perfectamente a las necesidades de arnauds. Sin JS, solo CSS y HTML.

Benjamin Udink ten Cate

11

http://jsfiddle.net/MBs64/

.frame {
    height: 35px;      /* Equals maximum image height */
    width: 160px;
    border: 1px solid red;
    text-align: center;
    margin: 1em 0;
    display: table-cell;
    vertical-align: middle;
}
img {
    background: #3A6F9A;
    display: block;
    max-height: 35px;
    max-width: 160px;
}

La propiedad clave es display: table-cell;para .frame. Div.framese muestra en línea con esto, por lo que debe envolverlo en un elemento de bloque.

Esto funciona en Firefox, Opera, Chrome, Safari e Internet Explorer 8 (y versiones posteriores).

ACTUALIZAR

Para Internet Explorer 7 necesitamos agregar una expresión CSS:

*:first-child+html img {
    position: relative;
    top: expression((this.parentNode.clientHeight-this.clientHeight)/2+"px");
}

Webars
fuente

Excelente. ¿Algún truco para IE7 que evite el javascript?

Arnaud Le Blanc

No estoy seguro, pero tal vez las expresiones CSS ayudarían. Pero también son javascript. La única diferencia es que los escribe en archivos CSS, no en js.

Webars

Si, buena idea. Eso sería más manejable (el script se ejecuta automáticamente según sea necesario), y como se supone que es solo IE7, está bien.

Arnaud Le Blanc

7

Mi solución: http://jsfiddle.net/XNAj6/2/

<div class="container">
    <div class="frame">
        <img src="http://jsfiddle.net/img/logo.png" class="img" alt="" />
    </div>
</div>

.container {
    display: table;
    float: left;
    border: solid black 1px;
    margin: 2px;
    padding: 0;
    background-color: black;
    width: 150px;
    height: 150px;
}
.frame {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    border-width: 0;
}
.img {
    max-width: 150px;
    max-height: 150px;
    vertical-align: middle;
}

Ilya Lysenko
fuente

7

Esto funciona para navegadores modernos (2016 en el momento de la edición) como se muestra en esta demostración en codepen

.frame {
    height: 25px;
    line-height: 25px;
    width: 160px;
    border: 1px solid #83A7D3;          
}
.frame img {
    background: #3A6F9A;
    display:inline-block;
    vertical-align: middle;
}

Es muy importante que asigne una clase a las imágenes o utilice la herencia para orientar las imágenes que necesita centrar. En este ejemplo, lo usamos .frame img {}para que solo las imágenes envueltas por un div con una clase de .framesean seleccionadas.

angulos
fuente

solo ie7, solo pon altura de línea: 25px;

AnglimasS

1

no parece estar correctamente alineado incluso en Firefox y Chrome ( jsfiddle.net/4RPFa/19 )

Arnaud Le Blanc

7

Pruebe esta solución con CSS puro http://jsfiddle.net/sandeep/4RPFa/72/

Tal vez sea el principal problema con su HTML. No está utilizando comillas cuando define c lass& image heighten su HTML.

CSS:

.frame {
    height: 25px;      /* Equals maximum image height */
    width: 160px;
    border: 1px solid red;
    position: relative;
    margin: 1em 0;
    top: 50%;
    text-align: center;
    line-height: 24px;
    margin-bottom: 20px;
}

img {
    background: #3A6F9A;
    vertical-align: middle;
    line-height: 0;
    margin: 0 auto;
    max-height: 25px;
}

Cuando trabajo con la imgetiqueta, deja un espacio de 3 píxeles a 2 píxeles top. Ahora disminuyo line-heighty está funcionando.

CSS:

    .frame {
        height: 25px;      /* Equals maximum image height */
        width: 160px;
        border: 1px solid red;
        margin: 1em 0;
        text-align: center;
        line-height: 22px;
        *:first-child+html line-height:24px; /* For Internet Explorer 7 */
    }

    img {
        background: #3A6F9A;
        vertical-align: middle;
        line-height: 0;    
        max-height: 25px;
        max-width: 160px;
    }
@media screen and (-webkit-min-device-pixel-ratio:0) {
    .frame {
        line-height:20px; /* WebKit browsers */
    }

La line-heightpropiedad se representa de manera diferente en diferentes navegadores. Entonces, tenemos que definir diferentes line-heightnavegadores de propiedades.

Verifique este ejemplo: http://jsfiddle.net/sandeep/4be8t/11/

Verifique este ejemplo sobre line-heightdiferentes en diferentes navegadores: diferencias de altura de entrada en Firefox y Chrome

sandeep
fuente

2

No funciona (al menos en Firefox). Para las citas que faltan, esto está permitido en HTML5 (no sé qué tipo de documento se usa en jsfiddle)

Arnaud Le Blanc

7

No estoy seguro acerca de Internet Explorer, pero en Firefox y Chrome, si tiene una imgen un divrecipiente, el siguiente contenido CSS debería trabajar. Al menos para mí funciona bien:

div.img-container {
    display: table-cell;
    vertical-align: middle;
    height: 450px;
    width: 490px;
}

div.img-container img {
    max-height: 450px;
    max-width: 490px;
}

Slava
fuente

IE8 +, desafortunadamente. Bien para mí, pero tal vez no para otros.

TheCarver

También tenga en cuenta que display:table-cell;no acepta% como anchos

Mutmatt

7

Solución usando una tabla y celdas de tabla

A veces se debe resolver visualizándolo como table / table-cell. Por ejemplo, una pantalla de título rápida. Es una forma recomendada por W3 también. Le recomiendo que consulte este enlace llamado Centrar un bloque o imagen de W3C.org.

Los consejos utilizados aquí son:

Contenedor de posicionamiento absoluto mostrado como tabla
Vertical alineado al contenido central que se muestra como celda de tabla

.container {
    position: absolute;
    display: table;
    width: 100%;
    height: 100%;
}
.content {
    display: table-cell;
    vertical-align: middle;
}

<div class="container">
  <div class="content">
    <h1 style="text-align:center">Peace in the world</h1>
 </div>
</div>

Expandir fragmento

Personalmente, no estoy de acuerdo con el uso de ayudantes para este propósito.

Sam
fuente

6

Una manera fácil que funciona para mí:

img {
    vertical-align: middle;
    display: inline-block;
    position: relative;
}

Funciona muy bien para Google Chrome. Pruebe este en un navegador diferente.

DOCTYPE HTML
fuente

6

Para centrar una imagen dentro de un contenedor (podría ser un logotipo) además de un texto como este:

Básicamente envuelves la imagen

.outer-frame {
  border: 1px solid red;
  min-height: 200px;
  text-align: center; /* Only to align horizontally */
}

.wrapper{
  line-height: 200px;
  border: 2px dashed blue;
  border-radius: 20px;
  margin: 50px
}

img {
  /* height: auto; */
  vertical-align: middle;   /* Only to align vertically */
}

<div class="outer-frame">
  <div class="wrapper">
    some text
    <img src="http://via.placeholder.com/150x150">
  </div>
</div>

Expandir fragmento

juliangonzalez
fuente

4

Si puede vivir con márgenes de tamaño de píxel, simplemente agregue font-size: 1px;a .frame. Pero recuerda que ahora en el.frame 1em = 1px, lo que significa que también debe establecer el margen en píxeles.

http://jsfiddle.net/feeela/4RPFa/96/

Ahora ya no está centrado en Opera ...

feeela
fuente

3

Yo tuve el mismo problema. Esto funciona para mi:

<style type="text/css">
    div.parent {
        position: relative;
    }

    img.child {
        bottom: 0;
        left: 0;
        margin: auto;
        position: absolute;
        right: 0;
        top: 0;
    }
</style>

<div class="parent">
    <img class="child">
</div>

algreat
fuente

En realidad, la "posición: fija" en la imagen funcionó para mí, donde me he sentido frustrado por las numerosas respuestas falsas de personas que sugieren el método de celda de tabla que no funcionó en mis trabajos más cercanos. Con el método sugerido por algreat no necesita un contenedor adicional también.

Vasilios Paspalas

2

Puedes usar esto:

 .loaderimage {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 60px;
    height: 60px;
    margin-top: -30px; /* 50% of the height */
    margin-left: -30px;
 }

Masoumeh Karvar
fuente

1

El uso tabley el table-cellmétodo hacen el trabajo, especialmente porque también se dirige a algunos navegadores antiguos, creo un fragmento para que pueda ejecutarlo y verificar el resultado:

.wrapper {
  position: relative;
  display: table;
  width: 300px;
  height: 200px;
}

.inside {
  vertical-align: middle;
  display: table-cell;
}

<div class="wrapper">
  <div class="inside">
    <p>Centre me please!!!</p>
  </div>
  <div class="inside">
    <img src="https://cdn2.iconfinder.com/data/icons/social-icons-circular-black/512/stackoverflow-128.png" />
  </div>
</div>

Expandir fragmento

Alireza
fuente

0

He estado jugando con el uso de relleno para la alineación central. Deberá definir el tamaño del contenedor externo del nivel superior, pero el contenedor interno debe cambiar su tamaño y puede establecer el relleno en diferentes valores porcentuales.

jsfiddle

<div class='container'>
  <img src='image.jpg' />
</div>

.container {
  padding: 20%;
  background-color: blue;
}

img {
  width: 100%;
}

svnm
fuente

0

La mejor solución es que

.block{
    /* Decor */
    padding:0 20px;
    background: #666;
    border: 2px solid #fff;
    text-align: center;
    /* Important */
    min-height: 220px;
    width: 260px;
    white-space: nowrap;
}
.block:after{
    content: '';
    display: inline-block;
    height: 220px; /* The same as min-height */
    width: 1px;
    overflow: hidden;
    margin: 0 0 0 -5px;
    vertical-align: middle;
}
.block span{
    vertical-align: middle;
    display: inline-block;
    white-space: normal;
}

Kumar
fuente

0

Usa este:

position: absolute;
top: calc(50% - 0.5em);
left: calc(50% - 0.5em);
line-height: 1em;

Y puedes variar font-size.

th3pirat3
fuente

0

¿Desea alinear una imagen que tiene después de un texto / título y ambas están dentro de un div?

Ver en JSfiddle o Run Code Snippet.

Solo asegúrese de tener una ID o una clase en todos sus elementos (div, img, title, etc.).

Para mí funciona esta solución en todos los navegadores (para dispositivos móviles debe adaptar su código con: @media).

h2.h2red {
    color: red;
    font-size: 14px;
}
.mydivclass {
    margin-top: 30px;
    display: block;
}
img.mydesiredclass {
    margin-right: 10px;
    display: block;
    float: left; /* If you want to allign the text with an image on the same row */
    width: 100px;
    heght: 100px;
    margin-top: -40px /* Change this value to adapt to your page */;
}

<div class="mydivclass">
    <br />
    <img class="mydesiredclass" src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b3/Wikipedia-logo-v2-en.svg/2000px-Wikipedia-logo-v2-en.svg.png">
    <h2 class="h2red">Text aligned after image inside a div by negative manipulate the img position</h2>
</div>

Expandir fragmento

mariusfv
fuente

Cómo alinear verticalmente una imagen dentro de un div

Ejemplo

Respuestas:

Manifestación

CSS

JavaScript

Solución usando una tabla y celdas de tabla