CODEWITHSUNDEEP
htmlcss
janderson
janderson

Reputation: 973

CSS Centre a bunch of images within a div

I've been trying to center the images within a div on my page.

Relevant HTML:

<div class="imgblock">
        <div class="basket slide1"><a href="#">
          <div class="images">
            <div class="img-wrap"><img src="images/basket.jpg" alt="" align="center"/ </div>
            <div class="infos"></div>
          </div>
          </a></div>
        <div class="steak slide2"><a href="#">
          <div class="images">
            <div class="img-wrap"><img src="images/steak.jpg" alt="" /></div>
            <div class="infos"></div>
          </div>
          </a></div>
        <div class="col1-4 slide3"><a href="#">
          <div class="images">
            <div class="img-wrap"><img src="images/breakfast.jpg" alt="" /></div>
            <div class="infos"></div>
          </div>
          </a></div>
        <div class="fish slide4"><a href="#">
          <div class="images">
            <div class="img-wrap"><img src="images/fish.jpg" alt="" /></div>
            <div class="infos"></div>
          </div>
          </a></div>
</div>

Relevant CSS:

.imgblock {
width:940px;
text-align:center;
vertical-align:middle;
margin:0 10px;
}

In my research I was told to add text-align:center and vertical-align:middle. This didn't work, I also tried margin-left:auto and margin-right:auto.

Thanks for your help.

Upvotes: 0

Views: 100

Answers (3)

Neeraj
Neeraj

Reputation: 197

you can try

.basket {
    margin: 0 10px 0 320px;
    width: 300px;
}

Upvotes: 0

G-Cyrillus
G-Cyrillus

Reputation: 105893

since your image are floatting, you can only reduce width of .imgblock and use auto margin :

.imgblock {
width:830px;
margin:0 auto;;
}

Upvotes: 1

Roy Prins
Roy Prins

Reputation: 3080

As @mdesdev has said, the recommended way to center block items is through:

margin: 0 auto;

That goes for your images as well. I would do something like this (untested):

.imgblock img{
    display: block;
    margin: 0 auto;
}

You could probably do without some of the surrounding div's as well.

Upvotes: 1

Related Questions