CSS - positioning a horizontal line

Question

I'm trying to position a horizontal line on a section for a site I'm building and can't get it in the correct place. This is a Photoshop version of how it should look -

This is my coded version -

I'm using the hr tag to create it as this seems the most straightforward way - here's the code -

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>

Quite difficult to debug when the posted code doesn't reproduce the same output your image shows.... — Asons
– Asons, Commented Jul 2, 2017 at 20:57
I believe he's using gumby css framework cdnjs.cloudflare.com/ajax/libs/gumby/2.6.4/css/gumby.min.css based off of the class="four columns" still can not get it to completely replicate the look of the picture though. — Alessi 42
– Alessi 42, Commented Jul 2, 2017 at 20:58
@LGSon I'm using skeleton grid for the site, is that what you're referring to? — Mike.Whitehead
– Mike.Whitehead, Commented Jul 2, 2017 at 21:20
Yes, I was. It is important to know to be able to debug properly. Posted an answer, will that work? — Asons
– Asons, Commented Jul 2, 2017 at 21:32
@LGSon No, it hasn't changed anything re the positioning. I need it to be centred like the PSD version. — Mike.Whitehead
– Mike.Whitehead, Commented Jul 2, 2017 at 21:35

Asons · Accepted Answer · 2017-07-02 21:53:56Z

The hr is already given a style in the framework, so if you give it a class like this, it will override the default.

The major reason why it is not exactly positioned vertically between the text and image part, is that the text row and image row has not the same top/bottom margin/padding, so I increased the margin-top/bottom a little, and the second hr, the one after the images, were placed within the row, so I moved it outside.

To get it exact in between, you have elaborate with the row's padding/margin.

Stack snippet

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>

Master rsl · Accepted Answer · 2017-07-02 21:15:23Z

You can use the option: 'padding-top' or 'padding-bottom'

<section id="welcome">
    <div class="container">
        <div class="row" style="padding-bottom: 50px;">
            <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" style="padding-top: 50px; padding-bottom: 50px;">
            <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>
        </div> <hr>
    </div>
</section>

Collectives™ on Stack Overflow

CSS - positioning a horizontal line

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related