<!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.
与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
