How to center a group of images in HTML/CSS?


Tags: html,css,image,center

Problem :

I'm making a simple website for a friend and I can't seem to center 5 png images? I have them in a div and the images itself are using display: block; and margin: auto; to center which did work earlier using for only 1 picture as you'll see down below. My code:

<div class="mainContent">
                <img class="topContent" src="img/homepage.jpg"></img>
                <div class="middleContent">
                    <img class="middlePhoto1" src="img/icon1.png"></img>                
                    <img class="middlePhoto2" src="img/icon2.png"></img>        
                    <img class="middlePhoto3" src="img/icon3.png"></img>                
                    <img class="middlePhoto4" src="img/icon4.png"></img>
                    <img class="middlePhoto5" src="img/icon5.png"></img>
                </div>
            </div>

  .middleContent{
    width: 100%;
    top: 50px;
    position: relative;
}

h2{
    font-family: helvetica;
    font-size: 15px;
    text-align: center;
    float: left;
    width: 20%;
    position: relative;
    top: 30px;
}

.middlePhoto1, .middlePhoto2, .middlePhoto3, .middlePhoto4, .middlePhoto5{
    width: 15%;
    padding-right: 2%;
    padding-left: 2%;
}

So I edited it a bit and now the images are in the center of the screen but still not centered in the center screen if that made sense. I'm using only 5% padding right and i have like 300px left but still the fifth icon won't fit when it does have plenty of pixel space left???!?!?!?!?!?!?!



Solution :

You could try this:

.middleContent{
    /* Use text align to center them; */
    text-align: center;
}

.middleContent1, 
.middleContent2, 
.middleContent3, 
.middleContent4, 
.middleContent5{
    /* Display them as inline-blocks; */
    display: inline-block;
}

Or even better, instead of giving them all a different class, use CSS selectors to do the job:

.middleContent > img {
    /* Display them as inline-blocks; */
    display: inline-block;
}

The main problem is your float: left;. Floats invalidate the margin: auto, as the intention of float is to allow other items to wrap around it. You could try taking that off, as I don't see a need for it here in the first place.

Update

You were asking how to float two blocks centered next to each other without a gap in between, well, you could do that using font-size and inline-blocks. Try the following:

html {
    /* Make sure you have a fontsize here as it will be useful for modern browser resetting (this is the `rem` value, or Root EM) */
    font-size: 16px;
}

.middleContent {
    /* Eliminate any gaps between inline-block elements by setting the font-size to 0 */
    font-size: 0;
    /* Set a percentage width to make your blocks scalable */
    width: 50%;
    /* Set a max-width to make sure your images stop scaling at some point */
    max-width: 200px;
}
.middleContent * {
    /* Make sure any tags inside your block WILL be able to contain text */
    /* Start by defining it in pixels for older browsers */
    font-size: 16px;
    /* Then reset your font-size to the rem value. Older browser will fall back to 16px, but its not a huge issue. */
    font-size: 1rem;
}

    CSS Howto..

    In CSS, how to hover a background over an image

    How do I get rid of this blue halo around the close dialog button with jqueryui?

    How to fix text with limited height and absolute position overflows

    How to edit ol tags in rich text editor

    How do I override css for a particular control? [closed]

    how to use css to display multiple posts in inline-block like google+

    Tizen - how to change button font-size - fixed

    How to draw arrows in CSS [closed]

    How to set a css style to the last item of CListView?

    How to generate CSS color in proportion to value?

    How can I have multiply a pixel width value with LESS Css?

    how to align buttons in css/html in one line horizontally?

    How to avoid double border from the multiple
  • Show/hide stuff according to checkboxes using CSS: Why this code won´t work?

    CSS and HTML: How to create an Expanding DIV On Click?

    How to implement min left/right in css

    How would I go about making my q and a page like this: http://www.text-link-ads.com/r/faq

    Cache policy, css/js/images how to make them not to load each time i do full postback?

    How to make show/hide div with a toggle using CSS?

    how to make smooth css transition

    How to position a div under a link on click?

    How to change style for before/after in Angular?

    How to remove space between two buttons in a table row or “column”?

    How do you make a floated element fill the remaining horizontal space when it is between its fixed width siblings?

    How to create invoice / money reciept with html [closed]

    how to deal with repeated letters in a javascript hangman game

    How to add a margin to a paragraph?

    How do I put several elements on the second row in a div

    How can I disable the “Up” arrow via CSS

    How to select siblings between 2 tags of same class using CSS