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-block span元素来覆盖它。

http://jsfiddle.net/aqsPb/

在行css中居中文本

2 个答案: