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

    How to make tabs with pure HTML/CSS

    when a div is showing do some thing for me and when its hidden stop that , with jquery its possible?

    CSS sprite - showing part of another image when zooming

    how to apply transform rotate all browse in inline css using jquery

    How to correctly wait until JavaScript applies inline Css

    How to apply a CSS 3 blur filter to a background image

    How to set border-left for nav menu in css?

    How to use ExtJS stripeRows with RowExpander plugin in IE8

    How to remove href attributes from a tag and remove css associated to it in iframe using jquery

    How do I apply padding or a margin to this heading displayed as a table-cell?

    How to achieve vertical alignmernt of text paragraphs between Bootstrap columns

    How to vertically align image in a td cell, without vertically-align

    How to get hovering shadow under a letter with CSS-only?

    How do I get a CSS class to work in my Javascript file?

    CSS - How to horizontally center table whos position is absolute

    How to make this HTML change work? [closed]

    How to create the Facebook Status arrowed textbox?

    How to make this breed of resizable vertical divider for two divs?

    How can I nullify css property?

    How to run a Javascript function on an iframe before the source (src) is loaded?

    How to fit the content of the site in any resolution CSS

    how do i change a div background when you hover over a button in another div?

    how to design a search panel like in mashable with css only

    How to extend a wrapped element background both left and right with different color?

    How to apply custom CSS on Facebook comment box plugin

    How do I center bootstrap's carousel? Not the images, the carousel itself

    How to use css linear gradients in IE10?

    How to give a nested HTML table cell a transparent background?

    On a web page how do I display a label that changes to a drop down box on hover

    How to deploy a jekyll site locally with css, js and background images included?