¿Cómo hacer que las etiquetas <img> se alineen horizontalmente en el div?

Necesito que las imágenes se muestren una al lado de la otra horizontalmente en el div. ¿Cómo puedo hacer eso?¿Cómo hacer que las etiquetas <img> se alineen horizontalmente en el div?

HTML:

<div class="Wrapper"> 
    <img src="/wp-content/uploads/2012/07/TFT.png" alt="Smiley face" height="90" width="95" /> 
    <img src="/wp-content/uploads/2012/07/Ltyt.png" alt="Smiley face" height="90" width="95" /> 
    <img src="/wp-content/uploads/2012/07/artspng" alt="Smiley face" height="90" width="95" /> 
</div>

Referencia: jsFiddle

Fuente

2012-07-03 justcode

nos muestran el código HTML de cómo estás alineando esta IMG en primer lugar. – Starx

Comience por darnos más información ... HTML, tal vez un jsfiddle.net para darnos una idea de lo que ya ha intentado – freefaller

Actualice la porción html en su código, para que otros puedan responder mejor. – Starx

También puede utilizar las propiedades CSS display: inline-block o float: left para lograrlo.

Código HTML

<div> 
    <img ... /> 
    <img ... /> 
    <img ... /> 
</div>

Código CSS

div img{ display: inline-block;}

div img{ display: block;float: left;margin-right: 5px;}

Fuente

2012-07-03 10:57:01 Ravi

Usando el marcado que diste, solo las dos primeras imágenes se alinean horizontslly ... pls ¿tienes alguna sugerencia? – justcode

Intenta aumentar el ancho del contenedor en el que se encuentran. Probablemente no quepan, por lo que se rompen en otra línea. – menislici

¡increíble! ... funciona ... gracias – justcode

ahora usted puede hacer servir

Su enlace por defecto eshttp://tinkerbin.com/ob9HFOA4

Css

img{ 
    display: inline-block; 
    vertical-align: top; 
    }

demostración en vivo http://tinkerbin.com/a5BxIZrs

Fuente

2012-07-03 10:47:59

¿Qué se supone que es esto? – Starx

creo que debería utilizar este http://tinkerbin.com/pakIgNQQ –

en la suposición general de su ser código de algo como esto

<div> 
    <img ... /> 
    <img ... /> 
    <img ... /> 
</div>

Entonces, una simple propiedad CSS será hecho el trabajo.

div img { display: inline; }

Al ver su porción HTML. Puede usar el siguiente CSS para ponerlos en línea.

.partners img { display: inline; }

Fuente

2012-07-03 10:48:39 Starx

En lugar de utilizar inline, que le priva de una gran parte del control que viene con block elementos, o cambiar su alineación vertical, me gustaría flotar:

<html> 
    <head> 
     <style> 
      div.img_holder img 
      { 
       float: left; 
      } 
     </style> 
    </head> 
    <body> 
     <div class = "img_holder"> 
      <img src="" /> 
      <img src="" /> 
      <img src="" /> 
      <img src="" /> 
     </div> 
    </body> 
</html>

flotante es un peculiar ciencia propia en CSS; vale la pena aprender, ya que puede arrojar algunos resultados muy potentes. Por ejemplo, si estos divs, y no las imágenes, con inline le impedirían establecer su altura. Inline también afecta cómo funcionan margins y padding. vertical-align es incoherente entre los navegadores y, si no me equivoco, no debería arrojar los resultados que está buscando, en absoluto.

Fuente

2012-07-03 10:55:03

Utilicé la propiedad flotante y solo 2 imágenes alineadas horizontalmente ... ¿tiene alguna sugerencia? – justcode

Los flotantes se comportarán un poco como elementos en línea, ya que se envolverán si sus padres no son lo suficientemente grandes. Establecer el ancho de los padres (en mi ejemplo, 'img_holder') al apropiado debería ayudar. Si no, ¿podría proporcionar una captura de pantalla? Sus imágenes tienen 95 píxeles de ancho (según lo anterior) ¿tienen también márgenes o relleno? –

Firts de todos, a fin de no estropear sus otras imágenes lo que probablemente va a añadir , haz lo siguiente:

.Wrapper img{ float: left; }

Esto hará flotar todas las imágenes dentro de la clase .Wrapper a la izquierda. Si todas las imágenes en la página donde se llaman estas reglas CSS estarán alineados a la izquierda, haga lo siguiente:

.Wrapper img{ float: left; }

EDIT: Añadir esta regla a .Wrapper

.Wrapper{ width: 100%; }

Fuente

2012-07-03 18:49:19 menislici

Utilicé la propiedad flotante pero solo dos de las imágenes se alinean horizontalmente ... – justcode

¿Cómo hacer que las etiquetas <img> se alineen horizontalmente en el div?

Respuesta

Cuestiones relacionadas