Question

我添加的这个换行符并不是我想要的地方。我想把它放在下面的标题和图像之间。

我尝试了margin-bottom：20px;但它把图像推到了我不想要的页面上。我只想保持尺寸并将其置于中间位置。

您最有可能寻找的CSS位于CSS页面的底部。

＆＃13;

/* PROCESS **********/

#process {
  text-align: center;
  margin-bottom: 25px;
}

#process-span {
  position: absolute;
  bottom: 0;
  right: 0;
}

#process img {
  display: inline;
  height: 100%;
  width: 100%;
  -webkit-border-radius: 10%;
  -moz-border-radius: 10%;
  box-shadow: 1px 3px 1px 1px;
}

#process p {
  z-index: 100;
  position: absolute;
  font-weight: bold;
  top: 235px;
  color: white;
  font-size: small;
  padding: 10px;
  margin-right: 15px;
}

#process h4 {
  margin-top: 25px;
}

#process .btn-go {
  margin-bottom: 500px;
  background-color: #4AA0D5;
  color: #fff;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  text-decoration: none;
  padding: 10px 10px;
  border-radius: 10px;
  border: 2px white solid;
}

#process .btn-go:hover,
#process .btn-go:focus {
  color: #4AA0D5;
  border: 2px #4AA0D5 solid !important;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  -webkit-border-radius: 0%;
  -moz-border-radius: 0%;
  background-color: #fff;
}

#process .bottom-line {
  width: 50px;
}

＆＃13;

<section id="process">
  <div class="container">
    <h2>How the Process Works</h2>
    <div class="lead2">
      <hr class="bottom-line">
    </div>
    <!-- lead2 -->
    <div class="row">
      <div class="col-sm-4">
        <img src="img/image2.png" alt="Design">
        <span><p>Reach out to me and describe the type of project you want &amp; audience its for.</p></span>
      </div>
      <!-- col -->
      <div class="col-sm-4">
        <img src="img/image1.png" alt="Relax">
        <p>Sit back and relax! Watch your project grow with routine progress reports &amp; quick-to-respond communication.</p>
      </div>
      <!-- col -->
      <div class="col-sm-4">
        <img src="img/image3.png" alt="Finish">
        <p>The project will be turned into you at the agreed time and considered completed only when you are
          <bold>100%</bold> satisfied.</p>
      </div>
      <!-- col -->

    </div>
    <!-- row -->

  </div>
  <!-- container -->
  <h4><a href="#contact" class="btn-go">Let's Do It!</a></h4>
</section>
<!-- project-features -->

＆＃13;

Answer 1

您可以将margin: 1rem auto 1.5rem;添加到hr，如下面的代码段所示。不同的顶部/底部距离来自这样的事实：它上面的标题具有更多的默认填充底部，而后面的元素具有填充顶部。

＆＃13;

/* PROCESS **********/

.lead2 hr {
  margin: 1rem auto 1.5rem;
}

#process {
  text-align: center;
  margin-bottom: 25px;
}

#process-span {
  position: absolute;
  bottom: 0;
  right: 0;
}

#process img {
  display: inline;
  height: 100%;
  width: 100%;
  -webkit-border-radius: 10%;
  -moz-border-radius: 10%;
  box-shadow: 1px 3px 1px 1px;
}

#process p {
  z-index: 100;
  position: absolute;
  font-weight: bold;
  top: 235px;
  color: white;
  font-size: small;
  padding: 10px;
  margin-right: 15px;
}

#process h4 {
  margin-top: 25px;
}

#process .btn-go {
  margin-bottom: 500px;
  background-color: #4AA0D5;
  color: #fff;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  text-decoration: none;
  padding: 10px 10px;
  border-radius: 10px;
  border: 2px white solid;
}

#process .btn-go:hover,
#process .btn-go:focus {
  color: #4AA0D5;
  border: 2px #4AA0D5 solid !important;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  -webkit-border-radius: 0%;
  -moz-border-radius: 0%;
  background-color: #fff;
}

#process .bottom-line {
  width: 50px;
}

＆＃13;

<!DOCTYPE html>

<html lang="en">

<head>

  <body>
    <section id="process">
      <div class="container">
        <h2>How the Process Works</h2>
        <div class="lead2">
          <hr class="bottom-line">
        </div>
        <!-- lead2 -->
        <div class="row">
          <div class="col-sm-4">
            <img src="img/image2.png" alt="Design">
            <span><p>Reach out to me and describe the type of project you want &amp; audience its for.</p></span>
          </div>
          <!-- col -->
          <div class="col-sm-4">
            <img src="img/image1.png" alt="Relax">
            <p>Sit back and relax! Watch your project grow with routine progress reports &amp; quick-to-respond communication.</p>
          </div>
          <!-- col -->
          <div class="col-sm-4">
            <img src="img/image3.png" alt="Finish">
            <p>The project will be turned into you at the agreed time and considered completed only when you are
              <bold>100%</bold> satisfied.</p>
          </div>
          <!-- col -->

        </div>
        <!-- row -->

      </div>
      <!-- container -->
      <h4><a href="#contact" class="btn-go">Let's Do It!</a></h4>
    </section>
    <!-- project-features -->
  </body>
</head>

</html>

＆＃13;

Answer 2

有很多方法可以做到这一点。您没有使用任何类型的重置或任何内容，因此h2和hr上的默认边距来自浏览器，并且因浏览器而异。如果您希望h2，hr和图像部分之间的空格相等，我会从h2中删除边距，并在hr上添加一致的上/下边距{1}}，你可以使用你想要的任何边际值。

/* PROCESS **********/

#process {
  text-align: center;
  margin-bottom: 25px;
}

#process-span {
  position: absolute;
  bottom: 0;
  right: 0;
}

#process img {
  display: inline;
  height: 100%;
  width: 100%;
  -webkit-border-radius: 10%;
  -moz-border-radius: 10%;
  box-shadow: 1px 3px 1px 1px;
}

#process p {
  z-index: 100;
  position: absolute;
  font-weight: bold;
  top: 235px;
  color: white;
  font-size: small;
  padding: 10px;
  margin-right: 15px;
}

#process h4 {
  margin-top: 25px;
}

#process .btn-go {
  margin-bottom: 500px;
  background-color: #4AA0D5;
  color: #fff;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  text-decoration: none;
  padding: 10px 10px;
  border-radius: 10px;
  border: 2px white solid;
}

#process .btn-go:hover,
#process .btn-go:focus {
  color: #4AA0D5;
  border: 2px #4AA0D5 solid !important;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  -webkit-border-radius: 0%;
  -moz-border-radius: 0%;
  background-color: #fff;
}

#process .bottom-line {
  width: 50px;
}

#process h2 {
  margin: 0;
}

#process hr {
  margin: 1em auto;
}

<!DOCTYPE html>

<html lang="en">

<head>

  <body>
    <section id="process">
      <div class="container">
        <h2>How the Process Works</h2>
        <div class="lead2">
          <hr class="bottom-line">
        </div>
        <!-- lead2 -->
        <div class="row">
          <div class="col-sm-4">
            <img src="img/image2.png" alt="Design">
            <span><p>Reach out to me and describe the type of project you want &amp; audience its for.</p></span>
          </div>
          <!-- col -->
          <div class="col-sm-4">
            <img src="img/image1.png" alt="Relax">
            <p>Sit back and relax! Watch your project grow with routine progress reports &amp; quick-to-respond communication.</p>
          </div>
          <!-- col -->
          <div class="col-sm-4">
            <img src="img/image3.png" alt="Finish">
            <p>The project will be turned into you at the agreed time and considered completed only when you are
              <bold>100%</bold> satisfied.</p>
          </div>
          <!-- col -->

        </div>
        <!-- row -->

      </div>
      <!-- container -->
      <h4><a href="#contact" class="btn-go">Let's Do It!</a></h4>
    </section>
    <!-- project-features -->
  </body>
</head>

</html>

将hr标记定位为更自然

2 个答案: