CODEWITHSUNDEEP
htmlcss
Belhor
Belhor

Reputation: 57

CSS floating images in center

So I have that html code with images+title:

<div class="container">
<div class="box"><a href="#" class="catname"><img src="image1.jpg" class="thumb"><p>Title 1</p></a></div>
<div class="box"><a href="#" class="catname"><img src="image2.jpg" class="thumb"><p>Title 2</p></a></div>
<div class="box"><a href="#" class="catname"><img src="image3.jpg" class="thumb"><p>Title 3</p></a></div>
<div class="box"><a href="#" class="catname"><img src="image4.jpg" class="thumb"><p>Title 4</p></a></div>
...
<div class="box"><a href="#" class="catname"><img src="image49.jpg" class="thumb"><p>Title</p></a></div>
<div class="box"><a href="#" class="catname"><img src="image50.jpg" class="thumb"><p>Title</p></a></div>
</div>

And css:

.container {
    width:80%;
    margin: 0 auto;
}

.box {
    display:inline-block;
    width:150px;
    margin-right:5px;
    float:left;
}

With that code I have more "white" space on right, I want to have these pictures in the center for different browser size without setting up width for container.

Is it possible with css?

Upvotes: 0

Views: 51

Answers (2)

Tornike
Tornike

Reputation: 1254

add to your container class text-align: center; and remove float:left; from box class.

Upvotes: 1

David
David

Reputation: 4873

That's what you call a centered, widthless float.

#outer {
  /* This is just so you can see that they're centered */
  width: 400px;
  border: 1px solid black;
  overflow: hidden;
}
.centered {
  position: relative;
  float: left;
  left: 50%;
  /* This and below is just because I have them stacked */
  height: 100px;
  padding-bottom: 10px;
  clear: left;
}
.centered div {
  position: relative;
  float: left;
  left: -50%;
}
<div id="outer">
  <div class="centered">
    <div>
      <img src="http://placehold.it/200x100" alt="" />
    </div>
  </div>

  <div class="centered">
    <div>
      <img src="http://placehold.it/300x100" alt="" />
    </div>
  </div>

  <div class="centered">
    <div>
      <img src="http://placehold.it/50x100" alt="" />
      <img src="http://placehold.it/50x100" alt="" />
      <img src="http://placehold.it/50x100" alt="" />
      <img src="http://placehold.it/50x100" alt="" />
      <img src="http://placehold.it/50x100" alt="" />
    </div>
  </div>
</div>

Upvotes: 0

Related Questions