vertical - centrar texto css

¿Cómo alinear verticalmente una imagen dentro de un div?

Question

Pregunta

¿Cómo puedes alinear una imagen dentro de un div contiene?

Ejemplo

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

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

La altura de .frame 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 IE≥7, Webkit, Gecko.

Ver el jsfiddle here

.frame {
    height: 25px;      /* equals max 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>

Answer 1

SOLUCIÓN UTILIZANDO TABLA Y TABLA CELULAR

A veces debería resolverse mostrando como table / table-cell. Por ejemplo, una pantalla de título rápido. Es una forma recomendada por W3 también. Te recomiendo que revises este enlace llamado Centrar las cosas de W3C.org

Los consejos utilizados aquí son:

• Contenedor de posicionamiento absoluto mostrado como tabla
• Vertical alineado para centrar el contenido mostrado como tabla-celda

.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> 

Personalmente no estoy de acuerdo en usar ayudantes para este propósito

Answer 2

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

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

Answer 3

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

Ver en JSfiddle o Ejecutar JSfiddle Código.

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

Para mí, esta solución funciona 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 alligned after image inside a div by negative manipulate the img postion</h2>
</div>

Answer 4

¿que tal este?

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

y puedes variar font-size

Answer 5

Además, puedes 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/-128.png" />
</div>

Answer 6

De esta manera puedes centrar una imagen verticalmente ( demo ):

div{
  height:150px; //IE7fix
  line-height: 150px;
}
img{
  vertical-align: middle;
  margin-bottom:0.25em;
}

Answer 7

El único (y el mejor navegador cruzado) que conozco es usar un ayudante de inline-block con height: 100% y vertical-align: middle en ambos elementos.

Así que hay una solución: http://jsfiddle.net/kizu/4RPFa/4570/

.frame {
    height: 25px;      /* equals max 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>

O, si no quiere tener un elemento adicional en los navegadores modernos y no le importa usar expresiones de IE, puede usar un pseudo-elemento y agregarlo a IE 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 :before y expression() para IE: http://jsfiddle.net/kizu/4RPFa/4571/

.frame {
    height: 25px;      /* equals max 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>

Cómo funciona:

1. Cuando tienes dos elementos de inline-block cerca uno del otro, puedes alinearlos cada uno al lado del otro, así que con vertical-align: middle obtendrás algo como esto:

2. Cuando tiene un bloque con altura fija (en px , em u otra unidad absoluta), puede establecer la altura de los bloques internos en % .

3. Entonces, agregar un inline-block con height: 100% en un bloque con altura fija alinearía otro elemento de inline-block en inline-block en él ( <img/> en su caso) verticalmente cerca de él.

Answer 8

El uso de la table y table-cell método de table-cell hacen el trabajo, especialmente porque también tiene como objetivo algunos navegadores antiguos, creo un fragmento para que pueda ejecutarlo y verifique 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/-128.png" />
  </div>
</div> 

Answer 9

El viejo enlace de JSFiddle que publiqué aquí ya no funciona, esa es probablemente la razón para el voto negativo. Solo por ser una respuesta válida, todavía quiero volver a publicar la solución jQuery. Esto funciona para cada elemento que tiene aplicada la clase v_align . Se centrará verticalmente en el elemento principal y, al cambiar el tamaño de la ventana, se volverá a calcular.

Enlace al JSFiddle

$(document).ready(function() {
  // define the class that vertial aligns stuff
  var objects = ''.v_align'';
  // initial setup
  verticalAlign(objects);

  // register resize event listener
  $(window).resize(function() {
    verticalAlign(objects);
  });
});

function verticalAlign(selector) {
  $(selector).each(function(val) {
    var parent_height = $(this).parent().height();
    var dif = parent_height - $(this).height()
    // should only work if the parent is larger than the element
    var margin_top = dif > 0 ? dif/2 : 0;
    $(this).css("margin-top", margin_top + "px");
  });
}

Answer 10

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 use la herencia para apuntar a las imágenes que necesita centradas. En este ejemplo, usamos .frame img {} modo que solo las imágenes envueltas por un div con una clase de .frame serían dirigidas.

Answer 11

Esto podría ser útil:

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

Referencia: http://www.student.oulu.fi/~laurirai/www/css/middle/

Answer 12

He estado jugando con el uso de relleno para la alineación central. Necesitará definir el tamaño del contenedor externo de nivel superior, pero el contenedor interno debería redimensionarse, y puede configurar el relleno en diferentes valores porcentuales.

jsfiddle

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

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

img {
  width: 100%;
}

Answer 13

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;
}

Answer 14

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;
}

Answer 15

No estoy seguro acerca de IE, pero bajo Firefox y Chrome, si tienes un img en un contenedor div , el siguiente css debería funcionar. Al menos para mi 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;
}

Answer 16

Para aquellos que aterrizaron en esta publicación y están interesados ​​en una solución más moderna, y que no tienen la necesidad de admitir navegadores heredados, puede hacer esto:

.frame {
    display: flex;
    /*Uncomment below to center horizontally*/
    /*justify-content: center;*/
    align-items: center;
}

img {
    height: 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>

Aquí hay una pluma: http://codepen.io/ricardozea/pen/aa0ee8e6021087b6e2460664a0fa3f3e

Answer 17

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 for align horizontally
}

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

img {
//height: auto;
  vertical-align: middle;
}

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

Answer 18

Podrías hacer esto:

manifestación

http://jsfiddle.net/DZ8vW/1

CSS

.frame {
    height: 25px;      /* equals max 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";
})

Answer 19

Pruebe esta solución con css puro http://jsfiddle.net/sandeep/4RPFa/72/ Puede ser el principal problema con su html. No utilice comillas cuando defina la image height y la image height en su html.

CSS:

.frame {
    height: 25px;      /* equals max 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;
}

EDITAR:

Cuando trabajo con la etiqueta img , deja espacio de 3px to 2px desde top . Ahora disminuyo line-height y es trabajo. css:

    .frame {
        height: 25px;      /* equals max image height */
        width: 160px;
        border: 1px solid red;
        margin: 1em 0;
        text-align: center;
        line-height:22px;
        *:first-child+html line-height:24px; /* for IE7 */
    }

    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 propiedad de line-height se render diferente en diferentes navegadores. Asi que; Tenemos que definir diferentes navegadores de propiedad de line-height

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

Verifique este ejemplo acerca line-height diferente en diferentes navegadores, diferencias de altura de entrada en Firefox y Chrome

Answer 20

Puedes intentar configurar el CSS de PI para display: table-cell; vertical-align: middle; display: table-cell; vertical-align: middle;

Answer 21

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>

Answer 22

Si puede vivir con márgenes de tamaño de píxel, simplemente agregue font-size: 1px; a la .frame . Pero recuerde 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/

EDIT: ahora ya no esta centrado en Opera ...

Answer 23

Solución de 3 líneas:

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

Esto se aplica a cualquier cosa.

Desde here

Answer 24

Una manera fácil que funciona para mí:

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

Funciona para Google Chrome muy bien. Prueba este en otro navegador.

Answer 25

Una solución CSS pura:

http://jsfiddle.net/3MVPM/

El CSS:

.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;  
}

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

Answer 26

Yo tuve el mismo problema. Esto funciona para mí:

<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>

Answer 27

puedes usar esto:

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

}

Answer 28

http://jsfiddle.net/MBs64/

.frame {
    height: 35px;      /* equals max 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.frame se muestra en línea con esto, por lo que necesita envolverlo en un elemento de bloque.

Esto funciona en FF, Opera, Chrome, Safari e IE8 +.

ACTUALIZAR

Para IE7 necesitamos agregar una expresión css:

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

Answer 29

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

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;
}

Answer 30

Solución de imagen de fondo .frame el elemento de imagen todos juntos y lo configuré como fondo del div con una clase de .frame

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

esto al menos funciona bien en IE8, FF6 y Chrome13

Lo verifiqué, esta solución no funcionará para reducir imágenes de más de 25px de altura. Hay una propiedad llamada background-size que establece el tamaño del elemento, pero es CSS3 que entraría en conflicto con el requisito de IE7.

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