我想通过CSS实现这种特殊显示:



我需要在其中放置各种文本和行来填充左右两边的空白。

到目前为止,我已经了解了这个http://jsfiddle.net/g5jtm/,但是遇到了几个问题:


文本的宽度是可变的,如果我找到width:40%;,它将重置其他两行的宽度
display:table不允许我在文本中间对齐行


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

最佳答案

这是伪元素的一种方法

Codepen Demo

的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%;
}

关于css - 使文本容器自动适应内容,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/21859348/

10-11 20:27
查看更多