<分区>
我正在尝试在模板顶部实现标题 (h1)，如下所示(点代表垂直居中的点图像线):
title example 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"> </div>
<div class="title"><h1>This is a title</h1></div>
<div class="dotted"> </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;}
如您所见，标题充当表格。问题出在 dotted-divs 的 width: 10%; 中。我如何让这些相对于 h1 的动态高度具有可变宽度？希望这可以在 css/scss 中完成。
