用文字在中间创建水平尺？ [英] Create a horizontal rule with text in the middle?

问题描述

我想在页面上有一个如下所示的分隔线：

I would like to have a divider on my page that looks like this:

做到这一点的最佳方法是什么？

What is the best way to do that?

推荐答案

html

<h3><span>My latest work</span></h3>

css

h3 {
position:relative;
text-align:center;}

h3 span {
    display:inline-block;
    padding:0 10px;
    background:#fff;
}
h3:before {
    content:"";
    display:block;
    position:absolute;
    z-index:-1;
    left:0;
    right:0;
    top:50%;
    height:1px;
    background:#ccc;
}

这篇关于用文字在中间创建水平尺？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！