July 3, 2012

How to make the <img> tags line up horizontally in the div?

Question by justcode

I need to make the images show up side by side horizontally in the div. How can I do that?


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

Reference: jsFiddle

Answer by Ravi

You could also use css properties display:inline-block or float : left to achieve this.


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

CSS Code

div img{ display: inline-block;}


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

Answer by Starx

On the general assumption of your code being something like this

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

Then, a simple CSS property will get the job done.

div img { display: inline; }

On seeing your HTML portion. You can use the following CSS to get them online.

.partners img { display: inline; }

Author: Nabin Nepal (Starx)

Hello, I am Nabin Nepal and you can call me Starx. This is my blog where write about my life and my involvements. I am a Software Developer, A Cyclist and a Realist. I hope you will find my blog interesting. Follow me on Google+


Please fill the form - I will response as fast as I can!