我想通过CSS实现这个特定的显示:
我需要在那里放置各种文本和线条以填充左右两侧留下的空白区域。
到目前为止,我已经到了http://jsfiddle.net/g5jtm/,但是我遇到了几个问题:
width:40%;
,它将重置其他2行的宽度HTML:
<div class="container">
<div class="lines l1"></div>
<div class="copy">Consumer review</div>
<div class="lines l2"></div>
</div>
CSS:
.container {width:100%; display:table; position:relative; height:100px;}
.lines, .copy {display:table-cell;vertical-align: middle;width:auto; }
.copy { white-space: nowrap; padding:3px; text-align:center; font-size:24px; width:40%;}
.l1,.l2 {border-bottom:1px solid red; height:50px; }
答案 0 :(得分:2)
这是伪元素的一种方法
<强> HTML 强>
<div class="wrapper">
<h1 class="line">Consumer Review</h1>
</div>
<强> CSS 强>
.wrapper {
width:50%;
margin:0 auto;
}
.line {
display: table;
white-space: nowrap;
}
.line:before,
.line:after {
background: linear-gradient(to bottom, #9FD35F, #4F8C31) no-repeat center / 98% 3px;
content: '';
display: table-cell;
width: 50%;
}
答案 1 :(得分:0)
水平线标签
怎么样?HTML:
<div class="container">
<div class="lines l1"><hr></div>
<div class="copy">Consumer review</div>
<div class="lines l2"><hr></div>
</div>
的CSS:
.container {width:100%; display:table; position:relative; height:100px;}
.lines, .copy {display:table-cell;vertical-align: middle;width:auto; }
.copy { white-space: nowrap; padding:3px; text-align:center; font-size:24px; width:40%;}
hr {color:red}