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

    R: Shiny: How to align a gvisTable to the center in shinyapp

    How do I center a container in my HTML/CSS?

    How to apply style to Nth instance of class, and find by indirect inheritance - CSS Jquery

    How can the common text message format be replicated purely with CSS?

    How to dynamically change CSS style attribute of DIV tag?

    How to access my .png from a folder using CSS?

    How can i create a hexagon shape with an image inside? [duplicate]

    By CSS, how to make page height not change when an element is moved down

    how to target IE 6 AND IE7 in css

    How to define css selector class prefix with SASS

    Why is my text not showing in my DIV?

    How to protect my injected elements CSS?

    How to rotate a line(x1=50,y1=50,x2=50,y2=10) with respect to x=50,y=50 as center using CSS?

    How to make Internet Explorer 8 to support nth child() CSS element?

    How can this effect (line breaks) be achieved with CSS and/or Javascript

    how to add hover effect to button using css

    How to design the vertical scroll bar or customize the vertical scroll bar design?

    How to make images stay on one long line?

    How can I change the text decoration on numbers only on my web page?

    How to make div blocks not floating using CSS?

    How to use very large font sizes in Internet Explorer with CSS that won't affect design?

    How to move text using CSS animation?

    How to float

    to bottom of a

    when you can't use position:relative and position:absolute

    How do you programmatically apply a css class to an asp.net control?

    How to finish my modal ajax code to work correctly?

    How to make groups of divs the same width using only CSS?

    How to make a
  • link visited with css
  • How to add a class to an element with CSS

    Scroll Bar not Fully show the value In Div

    How do I stick my footer to bottom of the page with Google Chrome?