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?! :)

Solution 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.

Solution 2

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

.ImageHolder{
text-align:center;
}

.Image{
display:inline-block;
}

Comments

[yunzen]

What about some HTML code as well?

[thepriebe]

Here's a fiddle I put together. Just to get things moving: jsfiddle.net/ah2Uw

[thepriebe]

So do you want to have the div hug the images at the bottom? I'm confused as to what you really want done here. You have min-height: 22px;, so there's going to be extra space at the bottom since your images are 16px.

[Dimitris Damilos]

thepriebe you were correct. In your solution I just added height and width of my cell and all worked correctly. Thank you for your quick reply! :)

[drew010]

Thanks this helped me out greatly today.

[Rameez Hussain]

Good answer! Helped me out a lot!

[OscarRyz]

@jmbertucci You saved me!