Aligning multiple images horizontally in the center of a div

Question

I have a div and I want to align in the center of that div multiple images. All of the images have the same height and width of 16px. The problem is that I can either center them and have the extra space below but when I use the display:block to remove it, they are aligned to the left again. Here's my code:

div which I want to contain the images:

.cell{     position: relative;     float: left;     width: 300px;     min-height: 22px;     border-bottom: 1px solid #000;     border-right: 1px solid #000;      line-height: 22px;     font-family: Arial, Verdana;     font-size: 12px;     color: #000;     text-decoration: none;     text-align: center;      margin-bottom: 2px;     margin-right: 2px; } 

The above class has the properties needed in general. So I want to create a class for the img elements so that they can be aligned one next to each other and all together aligned horizontally.

Any working suggestions?! :)

Answer 1

Floating a block level item will push it to the left or right. "display:inline-block" on the IMG. And remove the float and position statements. Then "text-align:center" for the container div.

http://jsfiddle.net/B6Jsy/

I used a div as a fake img but it should work the same.

Answer 2

<div class="Image">FIRST</div> <div class="Image">SECOND</div> 

.ImageHolder{ text-align:center; }  .Image{ display:inline-block; }