CODEWITHSUNDEEP
htmlcss
HerrimanCoder
HerrimanCoder

Reputation: 7218

Center images in a div with equal horizontal and vertical spacing

I have a div containing 10 images, each with its own div:

<div id="TankDialog" title="Choose Tank" style="display:none">
      <div class="ImageBox"><img src="images/tanks/tank1.png" style="width:150px" /></div>
      <div class="ImageBox"><img src="images/tanks/tank2.png" style="width:150px" /></div>
      <div class="ImageBox"><img src="images/tanks/tank3.png" style="width:150px" /></div>
      <div class="ImageBox"><img src="images/tanks/tank4.png" style="width:150px" /></div>
      <div class="ImageBox"><img src="images/tanks/tank5.png" style="width:150px" /></div>
      <div class="ImageBox"><img src="images/tanks/tank6.png" style="width:150px" /></div>
      <div class="ImageBox"><img src="images/tanks/tank7.png" style="width:150px" /></div>
      <div class="ImageBox"><img src="images/tanks/tank8.png" style="width:150px" /></div>
      <div class="ImageBox"><img src="images/tanks/tank9.png" style="width:150px" /></div>
      <div class="ImageBox"><img src="images/tanks/tank10.png" style="width:150px" /></div>
</div>

These images are not uniform in size but I am forcing them all to 150px. But I want to lay out the images in a grid-like fashion so that they're each inside an invisible box that takes the same amount of horizontal and vertical space. And I want each image centered inside its invisible box. The divs around the images are just to aid with positioning/placement--if they're not necessary to achieve this layout, that's fine. The problem is that each image gets positioned at the top left of its div, rather than in the center. Here is the ImageBox class:

.ImageBox{
    float:left;
    width:177px;
    height:177px;
    display:block;
    margin: 0 auto;
}

Notice in the screenshot below how the image aligns in the top-left rather than the center. How can I fix this?

enter image description here

Upvotes: 1

Views: 117

Answers (2)

g1ji
g1ji

Reputation: 1129

this will work for you.

<html>
    <head>
        <title>Choose Tank</title>
        <style>
            .ImageBox{
                border: 2px solid red;
                float:left;
                width:177px;
                height:177px;
                background-size: contain;
                background-repeat: no-repeat;
                background-position: center;
            }
        </style>
    </head>
    <body>
        <div id="TankDialog" title="Choose Tank" style="width:660px;margin: 0 auto; " >
            <div class="ImageBox" style=" background-image: URL('images/tanks/tank1.png');"></div>
            <div class="ImageBox" style=" background-image: URL('images/tanks/tank2.png');"></div>
            <div class="ImageBox" style=" background-image: URL('images/tanks/tank3.png');"></div>
            <div class="ImageBox" style=" background-image: URL('images/tanks/tank4.png');"></div>
            <div class="ImageBox" style=" background-image: URL('images/tanks/tank5.png');"></div>
            <div class="ImageBox" style=" background-image: URL('images/tanks/tank6.png');"></div>
            <div class="ImageBox" style=" background-image: URL('images/tanks/tank7.png');"></div>
            <div class="ImageBox" style=" background-image: URL('images/tanks/tank8.png');"></div>
            <div class="ImageBox" style=" background-image: URL('images/tanks/tank9.png');"></div>
            <div class="ImageBox" style=" background-image: URL('images/tanks/tank10.png');"></div>
        </div>
    </body>
</html>

Upvotes: 0

Magicprog.fr
Magicprog.fr

Reputation: 4100

Add text-align and line-height to your ImageBox class:

.ImageBox {
    float:left;
    width:177px;
    height:177px;
    display:block;
    margin: 0 auto;
    text-align: center;
    line-height: 177px;
}

Add a vertical-align to your images:

.ImageBox > img {
    vertical-align: middle;
}

JsFiddle: http://jsfiddle.net/ghorg12110/e71f0txq/

Upvotes: 2

Related Questions