Reputation: 528
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
Reputation: 1
<center>Your Code Here</center>
<hr align="center" width="50%">
30990
Upvotes: 0
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
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
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
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
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