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

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

通常我会这样做:

This is a title

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

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

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

    

        
 
        
This is a title
        
 
    

这个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中完成.

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

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

@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;
  }

Today
Today News
Today News
More text