より自然に見えるようにhrタグを配置

Question

私が追加したこの改行は、私が望むところに座っていません。私はそれを下のヘッダーとイメージの間に集中させたいと思う。

私は余白を試しました：20px;それは私が欲しくないページの下に画像を押し込んだ。私はちょうど次元を保ち、その間に中心を置きたいと思う。

あなたが探している可能性が最も高いCSSは、CSSページの一番下にあります。

/* 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; 
 
}

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

Answer 1

あなたは以下のスニペットのようにhrにmargin: 1rem auto 1.5rem;を追加することができます。トップ/ボトムの距離が異なるのは、その上にあるヘッダーのデフォルトのパディングボトムが、後続のパディングトップのパディングトップよりも大きいことです。

/* 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; 
 
}

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

Answer 2

あなたがこれを行うことができる方法の束があります。どんな種類のリセットも使用していないので、h2とhrのデフォルトのマージンはブラウザからのもので、ブラウザによって異なります。 h2、hr、およびイメージセクションの間に等しいスペースが必要な場合は、h2からマージンを削除し、hrに一貫した上下のマージンを追加して、そこに必要なマージン値を使用できます。

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