Cómo alinear verticalmente una imagen dentro de un div

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

Ejemplo

En mi ejemplo, necesito centrar verticalmente el <img> en la <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 se desconoce. Puedo agregar nuevos elementos en .frame si esa es la única solución. Estoy intentando hacer esto en Internet Explorer 7 y versiones posteriores, WebKit, Gecko.

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

preguntado el 01 de septiembre de 11 a las 13:09

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

Le resultará útil leer el artículo de Centering Things sobre el W3C: w3.org/Style/Examples/007/center.en.html -

Creo que la clave es la altura de la línea en .frame para que esto funcione.

30 Respuestas

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

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

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

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

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


Cómo funciona:

  1. Cuando tienes dos inline-block elementos cercanos entre sí, puede alinear uno al lado del otro, por lo que con vertical-align: middle obtendrás algo como esto:

    Dos bloques alineados

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

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

contestado el 31 de mayo de 20 a las 18:05

PRESTE ATENCIÓN a que: <img src=""/> NO está dentro del <span></span> ayudante que se agregó. Está afuera. Casi me tiré de cada mechón de cabello sin darme cuenta de esto. - ryan

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 tramo de ayuda. Me tomó una hora por qué esta solución no funcionaba para mí. - juminoz

No estoy seguro de que esto sea cierto. He aplicado la misma metodología a un img sin un .helper y funciona bien. Solo haz el img y inline-block y puede alinearse verticalmente correctamente. - Kevr

Preste atención, esto solo funciona cuando la imagen tiene menos altura que el marco. si el img es más alto que el marco, no está alineado al medio. - zhuhang.jasper

Esto puede resultar útil:

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

respondido 24 mar '20, 06:03

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

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

preestreno


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

Respondido 11 Jul 19, 20:07

Una solución de tres líneas:

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

Esto se aplica a todo.

Desde aquí.

Respondido 11 Jul 19, 20:07

A puro Solución 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;
}
<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>

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

respondido 12 nov., 19:20

Para una solución más moderna, y si no es necesario 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>

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

Respondido 11 Jul 19, 20:07

De esta forma puede centrar una imagen verticalmente (manifestación):

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

Respondido 11 Jul 19, 20:07

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>

Respondido 11 Jul 19, 22:07

Hay un super fácil solución con caja flexible!

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

Respondido 21 Abr '16, 01:04

Sí, pero difícilmente puede verlo en todas las respuestas. Estaba tratando de 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 marco "inline-flex" funcionó mejor para mí. y para la imagen dentro de ella agregué: "vertical-align: middle". - sophie cooperman

Flexbox tiene un soporte de gama realmente amplio hoy en día. Esta es la solución más fácil (y probablemente su respuesta se lo agradecerá). documentación de soporte: caniuse.com/#feat=flexbox - Marina M

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

Respondido el 07 de Septiembre de 11 a las 17:09

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>

Respondido 11 Jul 19, 20:07

Imagina que tienes

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

Y css:

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

Respondido 25 ago 19, 14:08

Cuadrícula CSS

Si desea alinear una sola imagen verticalmente dentro de un contenedor de imágenes, puede usar esto:

.img-container {
  display: grid;
}

img { 
  align-self: center;
}

.img-container {
  display: grid;
  grid-auto-flow: column; 
  background: #BADA55;
  width: 1200px;
  height: 500px;
}

img.vertical-align {
  align-self: center;
}
<div class="img-container">
  <img src="https://picsum.photos/300/300" />
  <img class="vertical-align" src="https://picsum.photos/300/300" />
  <img src="https://picsum.photos/300/300" />
</div>

Si desea alinear varias imágenes dentro de un contenedor de imágenes, puede usar esto:

.img-container {
  display: grid;
  align-items: center;
}

.img-container {
  display: grid;
  grid-auto-flow: column;
  align-items: center;
  background: #BADA55;
  width: 1200px;
  height: 500px;
}
<div class="img-container">
  <img src="https://picsum.photos/300/300" />
  <img src="https://picsum.photos/300/300" />
  <img src="https://picsum.photos/300/300" />
</div>

Tenga en cuenta que he usado grid-auto-flow: column en ambos casos porque, de lo contrario, los elementos se ajustan a una fila especificando elementos de cuadrícula explícitos. En el código de la pregunta, también veo el elemento centrado horizontalmente. En ese caso, utilice el place-items: center en lugar de align-items: center.

respondido 10 nov., 20:21

gracias, me salvaste la vida - solhnia mohsen

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 verifiqué y esta solución no funcionará para encoger imágenes de más de 25 píxeles de altura. Hay una propiedad llamada background-size que establece el tamaño del elemento, pero es CSS 3 lo que entraría en conflicto con los requisitos de Internet Explorer 7.

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

Respondido 11 Jul 19, 20:07

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.frame se muestra como 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 posteriores).

ACTUALIZACIÓN

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

Respondido 11 Jul 19, 20:07

Podrías hacer esto:

Demo

http://jsfiddle.net/DZ8vW/1

CO

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

Respondido el 20 de junio de 20 a las 10:06

Bonito. ¿Alguna posibilidad de una solución de CSS puro? - Arnaud LeBlanc

Desafortunadamente, no, a menos que desee utilizar tablas o eliminar la compatibilidad con versiones anteriores de IE. :( Si supiera el tamaño exacto de las imágenes de antemano, sería diferente, pero no sin eso, no es posible solo con CSS. jose marikle

@Joseph ¿Cómo lo arreglarías con tablas? - Benjamín Udink ten Cate

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

Bueno, se adapta perfectamente a las necesidades de Arnauds. Sin JS, solo CSS y HTML. - Benjamín Udink ten Cate

Esto funciona para navegadores modernos (2016 en el momento de la edición) como se muestra en este 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 apuntar a las imágenes que necesita centrar. En este ejemplo usamos .frame img {} de modo que solo las imágenes envueltas por un div con una clase de .frame sería el objetivo.

Respondido 17 Oct 16, 19:10

solo ie7, solo ponga line-height: 25px; - anglimas

no parece estar correctamente alineado incluso en firefox y chrome ( jsfiddle.net/4RPFa/19 ) - Arnaud LeBlanc

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

Respondido 23 ago 13, 06:08

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

Quizás sea el principal problema con tu HTML. No está usando comillas cuando define class & image height en 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 el img etiqueta está dejando un espacio de 3 píxeles a 2 píxeles de 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-height La propiedad se representa de forma diferente en distintos navegadores. Entonces, tenemos que definir diferentes line-height navegadores de propiedades.

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

Mira este ejemplo sobre line-height diferente en diferentes navegadores: diferencias de altura de entrada en Firefox y Chrome

Respondido 11 Jul 19, 20:07

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

No estoy seguro de Internet Explorer, pero en Firefox y Chrome, si tiene un img en un parche de div contenedor, el siguiente contenido CSS debería funcionar. 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;
}

Respondido 11 Jul 19, 20:07

IE8 +, desafortunadamente. Está bien para mí, pero tal vez no para los demás. - elcarver

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

Solución usando una tabla y celdas de tabla

A veces debe resolverse mostrándose como tabla / celda de tabla. Por ejemplo, una pantalla de título rápida. También es una forma recomendada por W3. Te recomiendo que consultes este enlace llamado Centrar un bloque o una imagen de W3C.org.

Los consejos que se utilizan aquí son:

  • Contenedor de posicionamiento absoluto mostrado como tabla
  • Vertical alineado al contenido central 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 con el uso de ayudantes para este propósito.

Respondido 11 Jul 19, 20:07

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

Respondido 11 Jul 19, 20:07

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

Ingrese la descripción de la imagen aquí

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>

Respondido 11 Jul 19, 20:07

Si puede vivir con márgenes del tamaño de un píxel, simplemente agregue font-size: 1px; de las personas acusadas injustamente llamadas .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/

Ahora ya no está centrado en Opera ...

Respondido 11 Jul 19, 20:07

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>

Respondido 11 Jul 19, 20:07

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 sugirieron el método de celda de tabla que no funcionó en una de mis obras. Con el método sugerido por algreat, tampoco necesitas un recipiente adicional. - Vasilios Paspalas

Puedes usar esto:

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

Respondido 11 Jul 19, 22:07

Usar table y table-cell El método hace el trabajo, especialmente porque también apunta a algunos navegadores antiguos, creo un fragmento para usted que puede 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> 

Respondido el 28 de junio de 17 a las 14:06

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

Ver en JSfiddle o Ejecute el fragmento de código.

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 debes adaptar tu 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>

Respondido 11 Jul 19, 20:07

He estado jugando con el uso de relleno para la alineación central. Deberá definir el tamaño del contenedor externo de nivel superior, pero el contenedor interno debe cambiar de 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%;
}

Respondido el 15 de diciembre de 15 a las 05:12

La mejor solucion 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;
}

Respondido 11 Jul 19, 20:07

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.