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 get an interactive geographic map for a country? [closed]

    How would I name this HTML code so I could edit it with CSS? [closed]

    how to make an interactive uploader like gmail and facebook have?

    PHPStorm: How do I setup LESS to output to CSS directory with file watcher?

    How can CSS translate elements away from one point?

    WebPack how to put all css files into one css file

    How to avoid a th element from inheriting properties from a tr element in IE6/7

    How can I make this section of my webpage responsive? [closed]

    How to turn off element CSS background when dragged

    How to send an HTML file with css?

    How to make sure that different severity Toasters are shown differently?

    How to change background-color of selected option in IE11?

    how to Put a img and text middle of a div

    How do I specify IE 11 specific css file?

    How to avoid gaps using Isotope with Masonry layout sortby random

    xHTML/CSS: How to make inner div get 100% width minus another div width

    how to set a default prompt when nothing selected for “select” using css

    How to use only CSS to round my div tag area's corners?

    How to define variable with CSS value from HTML tag? [closed]

    (jQuery) How to animate the elements inside a scrollable div when they come into sight on scroll?

    Show or hide div based on selected value

    How to control css of images on top of a full page semi-transparent overlay div

    How to minimize the number of CSS classes created?

    CSS: how to place controls at both extrems of a cell table

    How can I increase the size of a gomap popup window?

    How to make text blink on website? [duplicate]

    How can I apply my CSS stylesheet to an RSS feed

    how to draw a configurable pie chart in css

    How to apply css on one html file only

    How to write a more specific css