How To Adjust The Width Of A Horizontal Rule Element

I've got a problem with setting the width of

---

elements. I mean I want my

---

to be displayed half of the full width like this image: As you can see the

---

Solution 1:

Set the style attributes of the hr element in css

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

Solution 2:

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

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

Solution 3:

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.

Solution 4:

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%">

Solution 5:

try adjusting font size of your hr tag

hr{
font-size: 1.5em;
}