如何在我的h1标签之前和之后创建一条线？

Question

如何在我的h1标签之前和之后创建一条线？

我正在寻找一些解决方案,以便我可以制作这样的东西:

-----------我的文字--------------在HTML/CSS中.所以我需要在我的文本之前和之后使用hr标签.

任何人都知道如何解决这个问题？

Answer 1

<!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>

Run Code Online (Sandbox Code Playgroud)

演示:http://jsfiddle.net/cKrqK/

但是,如果您不满意HR因40%宽度而不能一直延伸到页面边缘,这就是您可以解决的问题.

<!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>

Run Code Online (Sandbox Code Playgroud)

演示:http://jsfiddle.net/EdtwL/

第二个例子,放在人力资源与白色背景的文本(将其更改为任何背景你的页面有),并与中心对齐它margin-left: auto和margin-right: auto.

归档时间：	14 年，3 月前
查看次数：	7215 次
最近记录：	10 年，6 月前