Centering a row a boxes in CSS

Question

I'm creating a very basic landing page in Chrome and I'm stumped at trying to get my boxes (circles) to center relative to the page. I've tried a few examples in some other threads, but it doesn't seem to be working.

@import url(http://fonts.googleapis.com/css?family=Merriweather);
@import url(https://fonts.googleapis.com/css?family=PT+Sans);

/* closest I could get to Myraid Pro*/

* {
  box-sizing: border-box;
}

body {
  font-family: PT Sans, 'Merriweather', serif;
  padding-top: 200px;
  text-align: center;
  margin: auto;
  background-image: url("#");
  /* the above image is hidden for privacy*/
  background-repeat: no-repeat;
  background-position: top center;
  background-attachment: relative;
}

aside {
  font-size: 150%;
  /* memic welcome header */
}

a {
  /* link color for welcome header */
  color: #00599C;
  text-decoration: none;
}

.box {
  padding: 2em;
  border: 8px solid #ccc;
  border-radius: 100%;
  display: block;
  position: relative;
  width: 300px;
  height: 300px;
  float: left;
  left: 5%;
  margin: 5px;
  /*-1px 0 0 -1px; (alternative)*/
  color: black;
  background: linear-gradient( white, white 50%, #00599C 50%, #00599C);
  background-size: 100% 205%;
  transition: all 0.2s ease;
  animation: down-bump 0.4s ease;
}

.box h2 {
  /* description of each reference */
  font-weight: 400;
  letter-spacing: -1.5px;
  line-height: 1.2;
  text-align: center;
}

.underwriting {
  font-size: 150%;
}

.IT {
  font-size: 150%;
}

.claims {
  font-size: 150%;
}

.hr {
  font-size: 150%;
}

.box h3 {
  /*updated date */
  font: 0.8em "Lucida Grande", serif;
  text-align: center;
}

.box:hover {
  background-position: 100% 100%;
  animation: up-bump 0.4s ease;
}

.box:hover h2 {
  color: #C8C8CA;
  /* navy blue */
}

.box:hover h2 span {
  color: white;
}

.box:hover h3 {
  color: #ECECED;
  /* gray */
}


/* fun little animation to provide that interactive feel */

@keyframes up-bump {
  0% {
    padding-top: 2em;
  }
  50% {
    padding-top: 1.5em;
  }
  100% {
    padding-top: 2em;
  }
}

@keyframes down-bump {
  0% {
    padding-top: 2em;
  }
  50% {
    padding-top: 2.5em;
  }
  100% {
    padding-top: 2em;
  }
}

<div>
  <!-- this is an attempt to align the boxes center relative -->
  <a href="#" class="box">
    <h2><span class="underwriting">Underwriting</span> <p>References, Guidelines & Best Practices</p></h2>
    <h3>Updated - 8/1/2016</h3>
  </a>
  <a href="#" class="box">
    <h2><span class="IT">Information Technology</span> <p>How-to's & Troubleshooting</p></h2>
    <h3>Updated - 7/24/2016</h3>
  </a>
  <a href="#" class="box">
    <h2><span class="claims">Claims</span> <p>References, Guidelines & Best Practices</p></h2>
    <h3>Updated - 7/28/2016</h3>
  </a>
  <a href="#" class="box">
    <h2><span class="hr">Premium Audit & Billing </span> <p>References, Guidelines & Best Practices</p></h2>
    <h3>Updated - 7/21/2016</h3>
  </a>
</div>

Any help would be greatly appreciated! Thanks!

Yup that would've solved it, probably didn't pop up because I wasn't mentioning 'float'. Thanks for the heads up! — Daniel Moler, Aug 02 '16 at 17:21

showdev · Accepted Answer · 2016-08-02T16:58:27.577

The circles aren't centered horizontally because you are floating them left. Rather than floating block elements, I suggest setting them to display:inline-block. That way, the circles will all appear on the same line without floating them and text-align:center on their container will center them horizontally. Also, I set vertical-align:top to keep their tops aligned with each other.

I made the circles smaller, but that's just for the sake of this example.

* {
  box-sizing: border-box;
}
div {
  text-align: center;
}
.box {
  display: inline-block;
  vertical-align: top;
  width: 120px;
  height: 120px;
  padding: 2em;
  margin: 5px;
  border: 8px solid #ccc;
  border-radius: 100%;
  font-size: .6em;
  color: black;
  background: linear-gradient( white, white 50%, #00599C 50%, #00599C);
  background-size: 100% 205%;
  transition: all 0.2s ease;
  animation: down-bump 0.4s ease;
}
.box h2 {
  font-size: inherit;
  font-weight: 400;
  letter-spacing: -1.5px;
  line-height: 1;
  margin: 0;
}
.box h3 {
  font-size: inherit;
  font-family: "Lucida Grande", serif;
  margin: 0;
}
.box:hover {
  background-position: 100% 100%;
  animation: up-bump 0.4s ease;
}
.box:hover h2 {
  color: #C8C8CA;
}
.box:hover h2 span {
  color: white;
}
.box:hover h3 {
  color: #ECECED;
}
/* fun little animation to provide that interactive feel */

@keyframes up-bump {
  0% {
    padding-top: 2em;
  }
  50% {
    padding-top: 1.5em;
  }
  100% {
    padding-top: 2em;
  }
}
@keyframes down-bump {
  0% {
    padding-top: 2em;
  }
  50% {
    padding-top: 2.5em;
  }
  100% {
    padding-top: 2em;
  }
}

<div>
  <!-- this is an attempt to align the boxes center relative -->
  <a href="#" class="box">
    <h2><span class="underwriting">Underwriting</span> <p>References, Guidelines & Best Practices</p></h2>
    <h3>Updated - 8/1/2016</h3>
  </a>
  <a href="#" class="box">
    <h2><span class="IT">Information Technology</span> <p>How-to's & Troubleshooting</p></h2>
    <h3>Updated - 7/24/2016</h3>
  </a>
  <a href="#" class="box">
    <h2><span class="claims">Claims</span> <p>References, Guidelines & Best Practices</p></h2>
    <h3>Updated - 7/28/2016</h3>
  </a>
  <a href="#" class="box">
    <h2><span class="hr">Premium Audit & Billing </span> <p>References, Guidelines & Best Practices</p></h2>
    <h3>Updated - 7/21/2016</h3>
  </a>
</div>

perfect that did it! I don't know why i didn't think of inline-block. Geez louise! — Daniel Moler, Aug 02 '16 at 16:52

Centering a row a boxes in CSS

1 Answers1