Center a container full of images in css

1158 views css
8

I have been trying to center my container of images and have tried margin-left: auto; and margin-right: auto; in nearly everything related to the images.

Basically, I want it centered when I also scale down the page, it automatically moves some images down, but then I have a ton of blank space on the right side of my image.

Here is my HTML of my container:

        <div id="sponsor-container">
            <div id="row">
              <div class="column">
                <img src="images/isc.png">
                <img src="images/kendall.png">
                <img src="images/whaley.png">
                <img src="images/drews.png">

              </div>
              <div class="column">
                <img src="images/amfam.png">
                <img src="images/body-zone.png">
                <img src="images/whitelake.png">
                <img src="images/townpump.png">

              </div> 
            </div>
        </div>

Here is my current css:

#row {
    padding: 20px 20px 20px 20px;


}

img {
    max-width: 100%;

}

.column {
    padding: 15px 15px 15px 15px;
    vertical-align: middle;

}

.column img {
    padding: 15px 15px 15px 15px;

}

answered question

Can you send the full html code?

Honestly all that I left out is a "main" div which is a black transparent background to see the background image. That stays centered all the way throughout my scaling.

1 Answer

11

Change

vertical-align: middle;

to

text-align: center;

#row {
    padding: 20px 20px 20px 20px;


}

img {
    max-width: 100%;

}

.column {
    padding: 15px 15px 15px 15px;
    text-align: center;

}

.column img {
    padding: 15px 15px 15px 15px;

}
        <div id="sponsor-container">
            <div id="row">
              <div class="column">
                <img src="images/isc.png">
                <img src="images/kendall.png">
                <img src="images/whaley.png">
                <img src="images/drews.png">

              </div>
              <div class="column">
                <img src="images/amfam.png">
                <img src="images/body-zone.png">
                <img src="images/whitelake.png">
                <img src="images/townpump.png">

              </div> 
            </div>
        </div>

posted this

Have an answer?

JD

Please login first before posting an answer.