由于所有最新的浏览器都支持 flexbox,而且距离作者提到 IE8 的要求已有五年了,我想用它来构建一个新的解决方案有一些乐趣。
各种例子变得越来越复杂:
https://jsfiddle.net/0mL79b4h/1/
https://jsfiddle.net/0mL79b4h/2/
CSS
div {
display: flex;
align-items: center;
}
div:before,
div:after {
border: 1px solid #000000;
border-radius: 2px;
height: 2px;
display: block;
content: "";
flex: 1;
width: 100%;
}
h1 {
text-align: center;
margin: 8px;
}
HTML
<div>
<h1>Example Text</h1>
</div>
<div>
<h1>Multi-Line<br>Example Text</h1>
</div>
优点:
- 使用弹性盒子!
- 超级简单的 HTML。
- 左右两侧可以调整不对称。
- 零背景问题,没有继承颜色等。
- 流体宽度。
- 多线支持。
- 左/中/右/自定义对齐:只需分别调整前后元素的 flex 属性,数字越大,该侧的空间越大。完全删除一个以左对齐或右对齐。
- 通过使用边框样式来产生有趣的效果(在这个例子中我实际上选择了圆形边框)。将高度设置为 0px 并使用border-top 代替通用线。
缺点:
- 使用弹性盒。叫我懒惰,但我在这个例子中没有建立任何向后兼容性,所以它在支持伪元素但不支持 flexbox 的浏览器上看起来很奇怪,尽管最后我检查的是 Chrome(Firefox 等),无论如何,它们都会自动更新。可能想使用一些 Modernizr。