Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

Tags:

html

css

image

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

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>

Reference: jsFiddle

like image 385
justcode Avatar asked Jul 03 '12 10:07

justcode


1 Answers

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

HTML Code

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

CSS Code

div img{ display: inline-block;}

or

div img{ display: block;float: left;margin-right: 5px;}
like image 177
Ravi Avatar answered Nov 12 '22 16:11

Ravi