Hyperbola
Hyperbola

Reputation: 528

How to create a partial-horizontal line in HTML?

I would like to create a thin line below the main heading in a webpage, which is centered, something like this. How do I go about it as using /hr will create an end-to-end line.

Upvotes: 8

Views: 58593

Answers (7)

Artatrana Nayak
Artatrana Nayak

Reputation: 1

<center>Your Code Here</center>

<hr align="center" width="50%">

30990

Upvotes: 0

Zhara
Zhara

Reputation: 11

html:

     <h1> Your code </h1>
     <hr> 

CSS:

       hr  {
       align-content : center;
       width : 20%;
       margin-left : auto;
       margin-right : auto;
        }  

The hr style settings are to be done in CSS not in the body.

Edit: I used width to control the length of the horizontal line that will appear below my heading or text. Margin-left and margin-right :auto, automatically placed the line in the center where as normally the line would begin at one end of the page and end in another.

Upvotes: 0

izaya Fearon
izaya Fearon

Reputation: 44

HTML:


CSS: . hr { width: 50% color: #222 }

Upvotes: 0

CK Wolfe
CK Wolfe

Reputation: 51

You can use HR tag or HR tag with simple css code

Html HR tag :

<center>Your Code Here</center>

<hr align="center" width="50%">

Here HR tag with simple css code:

hr {
width: 50%;
margin-left: auto;
margin-right: auto;
}
<center>Your sample code here</center>
<hr>

Note: The attributes that aren't supported in the HTML5 spec are all related to the tag's appearance. The appearance should be set in CSS, not in the HTML itself.

So use the <hr> tag without attributes, then style it in CSS to appear the way you want.

Upvotes: 4

G-Cyrillus
G-Cyrillus

Reputation: 105843

you can restyle and add margin to your hr

hr {
  border:none;
  border-top:1px solid;/* or bottom */
  margin:1em 15%; /* 15% or whatever fixed or % value that suits your needs*/
  }

body {text-align:center;}
<h1>Any content before</h1>
<hr/>
<p>any content after</p>

width a fixed width margin is involved too

hr {
  border:none;
  border-top:1px solid;/* or bottom */
  margin:1em auto; 
  width:17em;
  }

body {text-align:center;}
<h1>Any content before</h1>
<hr/>
<p>any content after</p>

You can also use the border-bottom of any tag ...

h1 {
  border-bottom:1px solid;
  padding-bottom:0.5em;
  display:table; /* to fit to content's width  else margin or a fixed width works too */
  margin:1em auto; /* if not display:table use width or margin values as first snippet */
  }

body {text-align:center;}
<h1>Any content before</h1>
<p>any content after</p>

Upvotes: 2

franc
franc

Reputation: 606

In your example this is done with css and not with a hr-tag So either you can use the css-style border-bottom as in your example, or you indeed can use a hr-tag which you give some CSS, e.g.:

<hr style="width:40%">

If you want to position the hr, you may need the position-style. You can try this easily on the w3c example site.

Remember, that the hr-width-attribute (not the style!) is not working under html5 anymore.

Upvotes: 17

Hassan
Hassan

Reputation: 1433

You can adjust HR width

<hr width="50%">

Or in the example you gave it is using css property of the div with a bottom border

#yourDiv {
    border-bottom: 1px solid gray;
}

Upvotes: 3

Related Questions