如何在标题周围创建双面虚线？

Question

我正在尝试在模板顶部实现标题(h1),如下所示(点表示垂直居中的点图像线):

标题示例http://www.pixelplus.nl/klanten/klijsen/example.jpg

通常我会这样做:

<h1><span>This is a title</span></h1>

将文本居中h1并添加背景颜色span以及一点填充.

在目前的项目中,我正处理一个透明的背景background-image.所以......背景色span不会飞.

在尝试了一些事情后,这是最接近的:

<header class="headerPage">
    <div class="row">
        <div class="dotted">&nbsp;</div>
        <div class="title"><h1>This is a title</h1></div>
        <div class="dotted">&nbsp;</div>
    </div>
</header>

这个CSS:

header.headerPage {
    display: table;
    margin: 0 0 35px;
    width: 100%;
}
header.headerPage .row {display: table-row;}
header.headerPage .row div {display: table-cell;}
header.headerPage .row div.dotted {
    width: 10%;
    background: url('../img/line-dotted.svg') left center repeat-x transparent;
}
header.headerPage .row div.title {
    padding: 0 15px;
    text-align: center;
}
header.headerPage .row div.title > * {display: inline;}
header.headerPage .row div h1 {margin: 0;}

正如您所看到的那样,标题充当了table.问题在于width: 10%;dot-divs.如何使这些相对于动态高度具有可变宽度h1？希望这可以在css/scss中完成.

Answer 1

此解决方案改编自此答案:文本和透明背景下的行分隔符

虚线将根据文本的高度(字体大小,多行)保持垂直居中,并适应文本的宽度:

@import url(http://fonts.googleapis.com/css?family=Open+Sans:300);
body{
    background-image: url(http://fr.playstation.com/media/5ZfqPjVF/BigSkyInfinity_Hero_EN.JPG);
    background-repeat:no-repeat;
    background-size:100% auto;
    font-family: 'Open Sans', sans-serif;
}

.divider{
    color:#ccc;
    width:70%;
    margin:20px auto;
    overflow:hidden;
    text-align:center;   
    line-height:1.2em;
}

.divider:before, .divider:after{
    content:"";
    vertical-align:middle;
    display:inline-block;
    width:50%;
    border-bottom:2px dotted #ccc;
    margin:0 2% 0 -55%;
}
.divider:after{
    margin:0 -55% 0 2%;
}
h1:nth-child(2){
    font-size:3em;
}
span{
  display:inline-block;
  vertical-align:middle;
  }

<h1 class="divider">Today</h1>
<h1 class="divider">Today News</h1>
<h1 class="divider"><span>Today News<br/>More text<span></h1>

请注意,如果您没有多行,则可以在没有<span>和只有一个标记的情况下实现效果.