我正在尝试创建一个<h1>以文本为中心，在每侧图像的居中控件，然后动态地将行填充到容器的剩余宽度。
我已经尝试了几种技术...目前使用：before和：after，且嵌套范围大。：after在工作，但是试图解决：before部分。
您可以flex用来实现您想要做的事情（demo（支持flexbox），demo（不支持flexbox））：
<div id="container">
<h1><span>a b c</span></h1>
<p>Change text shorter or longer.</p>
<p>Need left lines to be dynamic.</p>
</div>
h1 {
display:flex; /* Treats the :before, :after, and span as individual items */
align-items:center; /* Aligns items vertically (to align border properly) */
text-align:center; /* Aligns items horizontally for browsers that don't support flexbox */
}
h1 span {
/* Places arrow on each side of span */
background: url('https://dl.dropboxusercontent.com/u/101534624/arrow_cyan.gif') no-repeat left,
url('https://dl.dropboxusercontent.com/u/101534624/arrow_cyan.gif') no-repeat right;
padding: 0 50px; /* Prevents text from overlapping image */
}
h1:before,
h1:after {
content: " ";
/* Lines on sides of header */
background: url('https://dl.dropboxusercontent.com/u/101534624/h1-lines.png') repeat-x;
height: 6px; /* Height of lines */
flex-grow:1; /* Makes lines expand to edges of screen */
}
注意： 缺少对flexbox的支持（IE11 +），但是对于text-align:center，唯一的区别是缺少行。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句