Home/ Questions/Q 7195857
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-28T20:39:53+00:00

I’ve search around for a bit to find a solution on how I can

  • 0

I’ve search around for a bit to find a solution on how I can make something like this:

———– My text ————–
In HTML/CSS. So I need a hr tag before and after my text.

Anyone know how this can be fixed?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team
    <!DOCTYPE html>
<html>
<head>
<title>Inline HR</title>
<style type="text/css">
div {
    text-align: center;
}

hr {
    display: inline-block;
    width: 40%;
}
</style>
</head>
<body>
<div style="center">
<hr>
My Text
<hr>
</div>
</body>
</html>

    Demo: http://jsfiddle.net/cKrqK/

    However, if you are not happy that the HR’s don’t extend all the way to the edges of the page due to 40% width, this is how you can solve it.

    <!DOCTYPE html>
<html>
<head>
<title>Text on HR</title>
<style type="text/css">
.text {
    position: relative;
    top: -1em;
    text-align: center;
}

.text span {
    background-color: #ffffff;
    margin-left: auto;
    margin-right: auto;
    padding-left: 0.5em;
    padding-right: 0.5em;
}
</style>
</head>
<body>
<hr>
<div class="text">
<span>
My text
</span>
</div>
</body>
</html>

    Demo: http://jsfiddle.net/EdtwL/

    The second example, places your text with a white background (change it to whatever background your page has) on the HR and center-aligns it with margin-left: auto and margin-right: auto.

    • 0