css - 在一行css中居中文本

Question

我在为我的新网站设计布局时遇到了问题。

我想将我的文本居中在一条水平线上，就像这样使用 CSS 但找不到这样做的方法：

------- Title -------

有什么建议么 ？

Answer 1

见例子：http: //jsfiddle.net/qm9mk/1/

/* this code is pulled from:
    https://gist.github.com/kjantzer/5436097
*/

/* creates a divider line with text
    expects <el><span>Title Here</span></el> (where el = h1, h2, etc)
*/
.divider {
    position: relative;
    color: #999;
}   
    .divider span {
        background: #fff;
        position: relative;
        padding-right: 10px;
    }

    .divider > span + span {
        padding-right: 0;
        padding-left: 10px;
    }

    .divider.align-right {
        text-align: right;
    }

    .divider.align-right > span { padding-left: 10px; padding-right: 0;}

    .divider.align-center {
        text-align: center;
    }

    .divider.align-center > span { padding-left: 10px; padding-right: 10px;}


    /* create the dashed line */
    .divider:before {
        content: '';
        position: absolute;
        left: 0;
        top: 50%;
        height: 1px;
        width: 100%;
        border-top: solid 1px #ccc;
    }

    .divider.dashed:before {
        border-top-style: dashed;
    }

Answer 2

这可以通过一些简单的 css 来实现，我使用边框底部创建虚线，并使用inline-blockspan 元素覆盖它。

http://jsfiddle.net/aqsPb/