Daniel Moler Daniel Moler - 4 months ago 7
CSS Question

Centering a row a boxes in CSS

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!

Answer

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>

Comments