posicionar - poner texto al lado de una imagen html

Cómo hacer un centro de imagen(vertical y horizontalmente) dentro de un div más grande

Question

Tengo una div 200 x 200 px. Quiero colocar una imagen de 50 x 50 px justo en el centro de la división.

¿Cómo puede hacerse esto?

Puedo text-align: center horizontalmente usando text-align: center para el div. Pero la alineación vertical es el problema.

Answer 1

¡Me encanta saltar sobre viejos carros!

Aquí hay una actualización de 2015 para esta respuesta . Comencé a usar la transform CSS3 para hacer mi trabajo sucio para el posicionamiento. ¡Esto le permite no tener que crear HTML adicional, no tiene que hacer matemáticas (encontrar medias anchuras de cosas) puede usarlo en cualquier elemento!

Aquí hay un ejemplo (con el violín al final). Su HTML:

<div class="bigDiv">
    <div class="smallDiv">
    </div>
</div>

Con CSS de acompañamiento:

.bigDiv {
    width:200px;
    height:200px;
    background-color:#efefef;
    position:relative;
}
.smallDiv {
    width:50px;
    height:50px;
    background-color:#cc0000;
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
}

Lo que hago mucho estos días es que daré una clase a las cosas que quiero centradas y solo reutilizaré esa clase cada vez. Por ejemplo:

<div class="bigDiv">
    <div class="smallDiv centerThis">
    </div>
</div>

css

.bigDiv {
    width:200px;
    height:200px;
    background-color:#efefef;
    position:relative;
}
.smallDiv {
    width:50px;
    height:50px;
    background-color:#cc0000;
}
.centerThis {
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
}

De esta manera, siempre podré centrar algo en su contenedor. Solo debes asegurarte de que lo que quieres centrado está en un contenedor que tiene una position definida.

Aquí hay un violín

Por cierto: esto también sirve para centrar divisores MÁS GRANDES dentro de divisores MÁS PEQUEÑOS.

Answer 2

@sleepy Puedes hacerlo fácilmente usando los siguientes atributos:

#content {
  display: flex;
  align-items: center;
  width: 200px;
  height: 200px;
  border: 1px solid red;
}

#myImage {
  display: block;
  width: 50px;
  height: 50px;  
  margin: auto;
  border: 1px solid yellow;
}

<div id="content">
  <img id="myImage" src="http://blog.w3c.br/wp-content/uploads/2013/03/css31-213x300.png">
</div>

Referencias: W3

Answer 3

Aquí hay otro método para centrar todo dentro de cualquier cosa.

Violín de trabajo

HTML: (simple como siempre)

<div class="Container">
    <div class="Content"> /*this can be an img, span, or everything else*/
        I''m the Content
    </div>
</div>

CSS:

.Container
{
    text-align: center;
}

    .Container:before
    {
        content: '''';
        height: 100%;
        display: inline-block;
        vertical-align: middle;
    }

.Content
{
    display: inline-block;
    vertical-align: middle;
}

Beneficios

El contenedor y la altura del contenido son desconocidos.

Centrado sin un margen negativo específico, sin establecer la altura de la línea (por lo que funciona bien con varias líneas de texto) y sin un script, también funciona muy bien con las transiciones de CSS.

Answer 4

Descubrí que las respuestas de Valamas y Lepu anteriores son las respuestas más directas que tratan con imágenes de tamaño desconocido o de tamaño conocido que preferiría no incluir en su CSS. Solo tengo algunos ajustes pequeños: elimine los estilos irrelevantes, ajústelos a 200px para que coincidan con la pregunta, y agregue max-height / max-width para manejar imágenes que pueden ser demasiado grandes.

div.image-thumbnail
{
    width: 200px;
    height: 200px;
    line-height: 200px;
    text-align: center;
}
div.image-thumbnail img
{
    vertical-align: middle;
    max-height: 200px;
    max-width: 200px;
}

Answer 5

En CSS hazlo como:

img
{

  display:table-cell;
  vertical-align:middle;
  margin:auto;
}

Answer 6

Esto funcionó para mí. Añade esto a la imagen css:

img
{
   display: block;
   margin: auto;
}

Answer 7

Esto funciona correctamente:

display: block;
margin-left: auto;
margin-right: auto 

más intente esto si lo anterior solo le da un centrado horizontal:

.outerContainer {
   position: relative;
}

.innerContainer {
   width: 50px; //your image/element width here
   height: 50px; //your image/element height here
   overflow: auto;
   margin: auto;
   position: absolute;
   top: 0; left: 0; bottom: 0; right: 0;
}

Answer 8

Esto funciona para mí:

<body>
  <table id="table-foo">
    <tr><td>
        <img src="foo.png" /> 
    </td></tr>
  </table>
</body>
<style type="text/css">
  html, body {
    height: 100%;
  }
  #table-foo {
    width: 100%;
    height: 100%;
    text-align: center;
    vertical-align: middle;
  }
  #table-foo img {
    display: block;
    margin: 0 auto;
  }
</style>

Answer 9

Esto viene un poco tarde, pero aquí hay una solución que utilizo para alinear verticalmente los elementos dentro de un div padre.

Esto es útil para cuando conoce el tamaño del div contenedor, pero no el de la imagen contenida. (este es frecuentemente el caso cuando se trabaja con cajas de luz o carruseles de imágenes).

Aquí está el estilo que debes probar:

 container div
 {
   display:table-cell;
   vertical-align:middle;

   height:200px;
   width:200px;
 }

 img
 {
   /*Apply any styling here*/        
 }

Answer 10

Gracias a todos los demás por las pistas.

Utilicé este método

div.image-thumbnail
{
    width: 85px;
    height: 85px;
    line-height: 85px;
    display: inline-block;
    text-align: center;
}
div.image-thumbnail img
{
    vertical-align: middle;
}

Answer 11

He estado intentando que una imagen se centre vertical y horizontalmente dentro de una forma de círculo usando hmtl y css.

Después de combinar varios puntos de este hilo, esto es lo que se me ocurrió: jsFiddle

Aquí hay otro ejemplo de esto dentro de un diseño de tres columnas: jsFiddle

CSS:

#circle {
width: 100px;
height: 100px;
background: #A7A9AB;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
margin: 0 auto;
position: relative;
}

.images {
position: absolute;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
}

HTML:

<div id="circle">
<img class="images" src="https://png.icons8.com/facebook-like-filled/ios7/50" />
</div>

Answer 12

La alineación vertical es uno de los estilos css más mal utilizados. No funciona como podría esperarse en elementos que no son td''s o css "display: table-cell".

Este es un muy buen post al respecto. http://phrogz.net/CSS/vertical-align/index.html

Los métodos más comunes para lograr lo que estás buscando son:

• relleno superior / inferior
• posición absoluta
• altura de la línea

Answer 13

Normalmente, estableceré la line-height en 200px. Por lo general hace el truco.

Answer 14

Otra forma (no mencionada aquí todavía) es con Flexbox .

Solo establece las siguientes reglas en el contenedor div :

display: flex;
justify-content: center; /* align horizontal */
align-items: center; /* align vertical */

FIDDLE

div {
  width: 200px;
  height: 200px;
  border: 1px solid green;
  display: flex;
  justify-content: center;
  /* align horizontal */
  align-items: center;
  /* align vertical */
}

<div>
  <img src="http://lorempixel.com/50/50/food" alt="" />
</div>

Un buen lugar para comenzar con Flexbox para ver algunas de sus características y obtener la sintaxis para una máxima compatibilidad con el navegador es flexyboxes

Además, el soporte del navegador hoy en día es bastante bueno: caniuse

Para la compatibilidad entre navegadores para la display: flex y de align-items , puede usar lo siguiente:

display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-flex-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;

Answer 15

Otra forma es crear una table con valign , por supuesto. Esto funcionaría independientemente de que usted sepa la altura del div o no.

<div>
   <table width="100%" height="100%" align="center" valign="center">
   <tr><td>
      <img src="foo.jpg" alt="foo" />
   </td></tr>
   </table>
</div>

pero siempre debe atenerse a sólo css siempre que sea posible.

Answer 16

Personalmente, lo ubicaría como la imagen de fondo dentro del div, el CSS para ese ser:

#demo {
    background: url(bg_apple_little.gif) no-repeat center center;
    height: 200px;
    width: 200px;
}

(Asume que un div con id="demo" ya que usted está especificando height y width agregar un background no debería ser un problema)

Deja que el navegador tome la tensión.

Answer 17

Podemos lograrlo fácilmente usando flex . sin necesidad de imagen de fondo

<!DOCTYPE html>
<html>
<head>
   <style>
      #image-wrapper{
         width:500px;
         height:500px;
         border:1px solid #333;
         display:flex;
         justify-content:center;
         align-items:center;
      }
   </style>
</head>
<body>

<div id="image-wrapper">
<img id="myImage" src="http://blog.w3c.br/wp-content/uploads/2013/03/css31-213x300.png">
</div>

</body>
</html>

Answer 18

Puede centrar una imagen horizontal y verticalmente con el siguiente código (funciona en IE / FF). Colocará el borde superior de la imagen exactamente al 50% de la altura del navegador, y el margen superior (levantando la mitad de la altura de la imagen hacia arriba) la centrará perfectamente.

<style type="text/css">
    #middle {position: absolute; top: 50%;} /* for explorer only*/
    #middle[id] {vertical-align: middle; width: 100%;}
         #inner {position: relative; top: -50%} /* for explorer only */
</style>


<body style="background-color:#eeeeee">
    <div id="middle">
        <div id="inner" align="center" style="margin-top:...px"> /* the number will be half the height of your image, so for example if the height is 500px then you will put 250px for the margin-top */
            <img src="..." height="..." width="..." />
        </div>
    </div>
</body>

Answer 19

Puede establecer la posición de la imagen es alinear el centro horizontal por este

#imageId {
   display: block;
   margin-left: auto;
   margin-right:auto;
}

Answer 20

Tengo una galería de imágenes para las que no sé de antemano las alturas o los anchos exactos de las imágenes, solo sé que son más pequeñas que la división en la que se van a contener.

Al hacer una combinación de ajustes de altura de línea en el contenedor y usar vertical-align: middle en el elemento de imagen, finalmente conseguí que funcionara en FF 3.5, Safari 4.0 e IE7.0 usando el siguiente formato HTML y el siguiente CSS.

El marcado HTML

<div id="gallery">
    <div class="painting">
        <a href="Painting/Details/2">
            <img src="/Content/Images/Paintings/Thumbnail/painting_00002.jpg" />
        </a>
    </div>
    <div class="painting">
        ...
    </div>
    ...
 </div>

El CSS

div.painting
{
    float:left;

    height:138px; /* fixed dimensions */
    width: 138px;

    border: solid 1px white;
    background-color:#F5F5F5;


    line-height:138px;    
    text-align:center;

}

    div.painting a img
    {
        border:none;
        vertical-align:middle;

    }

Answer 21

Tuve este problema en HTML5 usando CSS3 y mi imagen estaba centrada como tal dentro del DIV ... oh, sí, no puedo olvidar cómo tuve que agregar la altura para mostrar la imagen ... por un tiempo me pregunté dónde. Fue hasta que hice esto. No creo que la posición y la pantalla sean necesarias.

background-image: url(''../Images/01.png'');    
background-repeat:no-repeat;
background-position:center;
position:relative;
display:block;
height:60px;

Answer 22

Utilice Flexbox: https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties

.outerDiv{
            display: flex;
            flex-direction: column;
            justify-content: center;  // Centering y-axis
            align-items :center ; //Centering x-axis
          }

Answer 23

Utilizar posicionamiento. Lo siguiente me funcionó:

div{
    display:block;
    overflow:hidden;
    width: 200px; 
    height: 200px;  
    position: relative;
}
div img{
    width: 50px; 
    height: 50px;   
    top: 50%;
    left: 50%;
    bottom: 50%;
    right: 50%;
    position: absolute;
}

Answer 24

Yo pondría tu div más grande con position:relative; Entonces para tu imagen haz esto:

img.classname{
   position:absolute;
   top:50%;
   left:50%;
   margin-top:-25px;
   margin-left:-25px;
}

Esto solo funciona porque conoces las dimensiones de la imagen y el div que contiene. Esto también le permitirá tener otros elementos dentro de la división que contiene ... donde las soluciones como el uso de la altura de línea no.

EDITAR : Tenga en cuenta ... sus márgenes son la mitad negativa del tamaño de la imagen.

Answer 25

en el div

style="text-align:center; line-height:200px"

Answer 26

fácil

img {
    transform: translate(50%,50%);
}

Answer 27

Esta es una solución antigua, pero las cuotas de mercado de los navegadores han avanzado lo suficiente como para que pueda sobrevivir sin la parte de pirateo de IE si no está preocupado por la degradación de IE7. Esto funciona cuando conoce las dimensiones del contenedor externo pero puede o no conocer las dimensiones de la imagen interna.

.parent {
    display: table;
    height: 200px; /* can be percentages, too, like 100% */
    width: 200px; /* can be percentages, too, like 100% */
}

.child {
    display: table-cell;
    vertical-align: middle;
    margin: 0 auto;
}

 <div class="parent">
     <div class="child">
         <img src="foo.png" alt="bar" />
     </div>
 </div>

Answer 28

Trabajando en navegadores antiguos (IE> = 8)

La posición absoluta en combinación con el margen automático permite centrar un elemento horizontal y verticalmente. La posición del elemento podría basarse en una posición del elemento padre utilizando una posición relativa. Ver resultado

img {
    position: absolute;
    margin: auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

Answer 29

div {
  position: absolute;
  
  border: 3px solid green;
  width: 200px;
  height: 200px;
}

img { 
  position: relative;
  
  border: 3px solid red;
  width: 50px;
  height: 50px;
}

.center {    
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%); /* IE 9 */
  -webkit-transform: translate(-50%, -50%); /* Chrome, Safari, Opera */
}

<div class="center">
  <img class="center" src="http://placeholders.org/250/000/fff" />
</div>

Relacionados: Centrar una imagen.

Answer 30

.container {
height: 200px;
width: 200px;
float:left;
position:relative;
}
.children-with-img {
position: absolute;
width:50px;
height:50px;
left:50%;
top:50%;
transform:translate(-50%);
}