CODEWITHSUNDEEP
htmlcss
user6604616
user6604616

Reputation:

How to adjust the width of a horizontal rule element

I've got a problem with setting the width of <hr> elements. I mean I want my <hr> to be displayed half of the full width like this image:

enter image description here

As you can see the <hr> element is between the <h1> tag and paragraph and it's half of screen full width.

I have searched and all I got was to setting the <hr> element like this:

<hr size="30">

But that just does not work. So do you know how to set the width of <hr> element?

Upvotes: 12

Views: 62342

Answers (9)

Ahmad Bassiouny
Ahmad Bassiouny

Reputation: 1

border-style: solid;
border-width: 5px;

Upvotes: -1

Seniru Ranasinghe
Seniru Ranasinghe

Reputation: 1

You can simply use attributes to do that.

<hr width=50%"> or <hr style="width:50%;">

Also, you can use, height:5px; to change thickness of the rule. background: red; to change the color of the rule.

Thank you.

Upvotes: 0

Mani Salehi
Mani Salehi

Reputation: 249

Fortunately, there is an attribute for this, the only thing you need to do is use the following attribute. In this case, I am going to it a width of 75%. I hope that it'll be helpful to you

<hr width="75%">

Upvotes: 0

gavgrif
gavgrif

Reputation: 15509

Set the style attributes of the hr element in css

hr {
    width:50%;
    margin:0 auto;
}

Upvotes: 20

Vishal Panara
Vishal Panara

Reputation: 766

You can do like this also

hr {
    margin: 0rem 10rem 0rem 10rem;
}

Upvotes: 0

KanUXD
KanUXD

Reputation: 707

You can do the following things

  • Move <hr /> inside title element [<h2> in this example]
  • Add padding-left:25% and padding-right:25% to title element
  • Add text-align:center to title element

h2{
  font-size:50px;
  padding:0 25%;
  text-align:center;
}


h2 hr{ width:100%;height:10px;background:#000;}
<h2>
This is a very big title
<hr />
</h2>

<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>

Hope it helps.

Upvotes: 1

Faraz Sh.
Faraz Sh.

Reputation: 377

It seems that is not the hr tag. probably it's the border bottom for the span container the text. so the width of the span will define the line width. use padding for the span to adjust the line-width.

I did a search and it seems this is the theme you are using: https://theme.co/x/

Upvotes: 0

Vaibhav
Vaibhav

Reputation: 1234

try adjusting font size of your hr tag

hr{
font-size: 1.5em;
}

Upvotes: 0

Faraz Sh.
Faraz Sh.

Reputation: 377

hr.half-width{
  width:50%;
  margin: 0 auto;
}

Then add class="half-width" to the hr element.

Upvotes: 1

Related Questions