Center floated/inline blokced divs with margin auto inside parent container

Question

This question has been asked may times but I am still having no luck with it. I have a container that loads thumbnails into. I am trying to have the thumbnails' margins set to auto but I have has no luck with this. The thumbs will center inside the container but the margins will not.

.align-contents{
    width: 100%;
  display: block;
  margin: 0 auto;
  text-align: center;
}
.profile.align{
    display: inline-block;
    position:relative;
    margin:auto auto;
}
.profile{
    text-align:center;
    height:auto;
}
.profile.align .PP{
    width:60px;
    height:60px;
    border:solid 3px #FFF;
    -moz-border-radius:200px; 
    -webkit-border-radius:200px; 
    border-radius:200px;
    position:relative;
    z-index:1;
    background-repeat:no-repeat;
    background-size:cover;
    background-position:center center;
    background-image:url(http://www.coopercarry.com/wp-content/themes/coopercarry/img/article-thumb.png);
}
.profile.align .status{
    width:20px;
    height:20px;
    right:0px;
    position:absolute;
    bottom:0px;
    border:solid 3px #FFF;
    -moz-border-radius:20px; 
    -webkit-border-radius:20px; 
    border-radius:20px;
    background:blue;
    z-index:2;
}

JS Fiddle

The thumbnails center in side the parent but is there a way I can set margin:auto so have the space between the divs set automatically

Add some HTML, or an image describing your problem, it's very abstract to an outsider right now. I second the jsfiddle request Neelabh made above. — rsn, Feb 22 '16 at 16:58
@Paulie_D but is there a way of using more than one line for example if there thumbs are wider than the container. Instead of scrolling have them start a new line? — Paul Ledger, Feb 22 '16 at 17:27
Sure, you can allow the row to wrap...but you have to set it, — Paulie_D, Feb 22 '16 at 17:27
http://stackoverflow.com/questions/6865194/fluid-width-with-equally-spaced-divs The first answer is your solution. — strwoc, Feb 22 '16 at 17:33

score 3 · Answer 1 · answered Feb 22 '16 at 17:26

Flexbox can do that.

.align-contents {
  width: 100%;
  display: block;
  margin: 0 auto;
  text-align: center;
  border: 1px solid red;
  display: flex;
  justify-content: space-between;
}
.profile.align {
  position: relative;
  border: 1px solid grey;
}
.profile {
  text-align: center;
  height: auto;
}
.profile.align .PP {
  width: 60px;
  height: 60px;
  border: solid 3px #FFF;
  -moz-border-radius: 200px;
  -webkit-border-radius: 200px;
  border-radius: 200px;
  position: relative;
  z-index: 1;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  background-image: url(http://www.coopercarry.com/wp-content/themes/coopercarry/img/article-thumb.png);
}
.profile.align .status {
  width: 20px;
  height: 20px;
  right: 0px;
  position: absolute;
  bottom: 0px;
  border: solid 3px #FFF;
  -moz-border-radius: 20px;
  -webkit-border-radius: 20px;
  border-radius: 20px;
  background: blue;
  z-index: 2;
}

<div class="align-contents">
  <div class="profile align">
    <div class="PP"></div>
    <div class="status"></div>
  </div>
  <div class="profile align">
    <div class="PP"></div>
    <div class="status"></div>
  </div>
  <div class="profile align">
    <div class="PP"></div>
    <div class="status"></div>
  </div>
  <div class="profile align">
    <div class="PP"></div>
    <div class="status"></div>
  </div>
</div>

score 0 · Answer 2 · answered Feb 22 '16 at 16:55

0

The problem might be margin:auto auto; instead of margin:0 auto; in .profile-align. If that's not the case try changing it to margin: 50%;

answered Feb 22 '16 at 16:55

strwoc

511
1
9
18

I tried with no success, adding margin: 50% just put each item on one line. I added a link to JS FIDDLE if that helps – Paul Ledger Feb 22 '16 at 17:07
Try adding `margin-left:3em;` and `float: left;` to your .profile.align and tell me if that's the effect you want to achieve? – strwoc Feb 22 '16 at 17:15
yes and no works fine with 4 thumbs but doesn't evenly space with more thumbs https://jsfiddle.net/oghmtdfn/1/ – Paul Ledger Feb 22 '16 at 17:22
Ok, just checking to see what your goal here is. – strwoc Feb 22 '16 at 17:25
http://stackoverflow.com/questions/6865194/fluid-width-with-equally-spaced-divs the solution is in the 1st answer. – strwoc Feb 22 '16 at 17:35

Center floated/inline blokced divs with margin auto inside parent container

2 Answers2