html - CSS - 定位水平线

Question

我试图在我正在构建的网站的一个部分上放置一条水平线，但无法将其放置在正确的位置。这是它的外观的 Photoshop 版本 -

这是我的编码版本 -

我正在使用 hr 标签来创建它，因为这似乎是最直接的方法 - 这是代码 -

hr {

    display: block;
    width: 250px;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    margin-left: auto;
    margin-right: auto;
    border-style: inset;
    border-width: 1px;
} 

<link href="https://cdnjs.cloudflare.com/ajax/libs/gumby/2.6.4/css/gumby.min.css" rel="stylesheet"/>

<section id="welcome">
       <div class="container"> 
            <div class="row">
                <div class="twelve columns">
                <h4>WELCOME TO FEATURE MEDIA</h4>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vel ex nisl. Vestibulum vitae ultricies nisl. Praesent sodales, leo at pellentesque pellentesque, nunc erat dapibus nunc, ut congue libero lorem in orci. Suspendisse potenti. Quisque facilisis mauris in vestibulum tempor. Suspendisse nec venenatis nisi. Phasellus sodales viverra ante quis efficitur. Pellentesque quis orci mi. Phasellus tempus, sapien ut luctus pellentesque, lacus risus accumsan lorem, in porta urna tellus ac nibh. Nunc varius elit non diam vehicula aliquet. In eget urna id orci molestie pulvinar. Integer quis risus eu erat iaculis aliquet ut at eros. Etiam feugiat, ante vel molestie finibus, lacus urna pharetra leo, ut lobortis massa lectus quis lorem. Vestibulum rhoncus turpis sagittis sapien vulputate sagittis. Nunc ac velit sollicitudin, consequat arcu ac, tincidunt risus.</p>
                </div>

            </div>
                <hr>
            <div class="row"> 
                <div class="four columns"> 
                    <div id="video">      
                        <h3>VIDEO</h3>
                        <img src="images/VIDEO.jpg" alt="Video" style="width:300px;height:150px;">
                    </div>
                </div>
                <div class="four columns"> 
                    <div id="blog">   
                        <h3>BLOG</h3>
                        <img src="images/blog.jpg" alt="blog" style="width:300px;height:150px;">
                    </div>    
                </div>
                <div class="four columns"> 
                    <div id="faq"> 
                        <h3>FAQ</h3>
                        <img src="images/faq.jpg" alt="FAQ" style="width:300px;height:150px;">
                    </div>   
                </div><hr>
            </div>        
        </div>
    </section>

Answer 1

hr 已经在框架中给出了样式，所以如果你给它一个像这样的类，它将覆盖默认值。

它在文本和图像部分之间没有完全垂直定位的主要原因是文本行和图像行的上/下边距/填充不相同，所以我增加了 margin-top/bottom 一点和第二个 hr，即图像之后的那个，被放置在 row 内，所以我将它移到了外面。

为了准确地介于两者之间，您对行的填充/边距进行了详细说明。

堆栈片段

hr.hr250center {
  display: block;
  width: 250px;
  margin-top: 2em;
  margin-bottom: 2.5em;
  margin-left: auto;
  margin-right: auto;
  border-style: inset;
  border-width: 1px;
  border-color: red;             /*  here you set color  */
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css" rel="stylesheet"/>

<section id="welcome">
  <div class="container">
    <div class="row">
      <div class="twelve columns">
        <h4>WELCOME TO FEATURE MEDIA</h4>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vel ex nisl. Vestibulum vitae ultricies nisl. Praesent sodales, leo at pellentesque pellentesque, nunc erat dapibus nunc, ut congue libero lorem in orci. Suspendisse potenti. Quisque
          facilisis mauris in vestibulum tempor. Suspendisse nec venenatis nisi. Phasellus sodales viverra ante quis efficitur. Pellentesque quis orci mi. Phasellus tempus, sapien ut luctus pellentesque, lacus risus accumsan lorem, in porta urna tellus
          ac nibh. Nunc varius elit non diam vehicula aliquet. In eget urna id orci molestie pulvinar. Integer quis risus eu erat iaculis aliquet ut at eros. Etiam feugiat, ante vel molestie finibus, lacus urna pharetra leo, ut lobortis massa lectus quis
          lorem. Vestibulum rhoncus turpis sagittis sapien vulputate sagittis. Nunc ac velit sollicitudin, consequat arcu ac, tincidunt risus.</p>
      </div>
    </div>
      <hr class="hr250center">
    <div class="row">
      <div class="four columns">
        <div id="video">
          <h3>VIDEO</h3>
          <img src="http://placehold.it/100/f00" alt="Video" style="width:300px;height:150px;">
        </div>
      </div>
      <div class="four columns">
        <div id="blog">
          <h3>BLOG</h3>
          <img src="http://placehold.it/100/f00" alt="blog" style="width:300px;height:150px;">
        </div>
      </div>
      <div class="four columns">
        <div id="faq">
          <h3>FAQ</h3>
          <img src="http://placehold.it/100/f00" alt="FAQ" style="width:300px;height:150px;">
        </div>
      </div>
    </div>
    <hr class="hr250center">
  </div>
</section>