How to create a partially horizontal line in HTML?

Question

I would like to create a thin line below the main heading on a webpage that is centered, something like this . How do I do this, since using / hr will create an end-to-end line.

Answer 1

For your example, this is done with css, not with hr -tag. Thus, either you can use the css-style border-bottom , as in your example, or you can really use the hr tag that you give CSS, for example:

<hr style="width:40%"> 

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

Remember that hr-width-attribute (not style!) No longer works under html5.

Answer 2

You can adjust HR width

 <hr width="50%"> 

Or the example you gave it uses the css property for a div with a lower bound

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

Answer 3

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 is an HR tag with simple css code:

 hr { width: 50%; margin-left: auto; margin-right: auto; } 

 <center>Your sample code here</center> <hr> 

Note: Attributes that are not supported in the HTML5 specification are related to the appearance of the tag. Appearance should be set in CSS, and not in the HTML itself.

So, use the <hr> with no attributes, then create it in CSS to make it look the way you want.

Answer 4

you can reinstall 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> 

fixed field widths are also involved

 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 bottom edge of any tag ...

 h1 { border-bottom:1px solid; padding-bottom:0.5em; display:table; /* to fit to content 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> 

Answer 5

HTML:

---

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