Question

我正在Chrome中创建一个非常基本的着陆页，我很难将我的方框（圆圈）放在相对于页面的中心位置。我在其他一些线程中尝试了一些例子，但它似乎没有用。

@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>

任何帮助将不胜感激！谢谢！

Answer 1

圆圈不是水平居中的，因为您将它们向左浮动。我建议将它们设置为display:inline-block，而不是浮动块元素。这样，圆圈将全部显示在同一条线上而不会浮动它们，并且它们的容器上的text-align:center将水平居中。另外，我设置vertical-align:top以保持其顶部彼此对齐。

我把圈子缩小了，但这只是为了这个例子。

* {
  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>

在CSS中将行放在一行

1 个答案: