使文本容器自动适应内容答案

【问题标题】：Make text container to fit content automatically使文本容器自动适应内容
【发布时间】：2014-02-18 16:15:44
【问题描述】：

我想通过 CSS 来实现这个特定的显示：

我需要在那里放置各种文本和线条来填充左右两侧的空白区域。

到目前为止，我遇到了这个http://jsfiddle.net/g5jtm/，但是我遇到了几个问题：

文本的宽度是可变的，如果我退出 width:40%;，它将重置其他 2 行的宽度
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; }

【问题讨论】：

我知道这不是问题所在。但是你试过用<fieldset><legend>My Teyt</legend></fieldset>来实现这个效果吗？
你想把线放在文字后面吗？
@Paulie_D no ... 就是这个想法 :)
@NicoO 显然我无法使用字段集实现我想要的。这里有一些解释stackoverflow.com/questions/2213881/…

标签： css alignment

【解决方案1】：

这是使用伪元素的一种方法

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

【讨论】：

【解决方案2】：

水平线标签怎么样

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}

【讨论】：

你应该发布你的答案。
好的。你能摆脱宽度：40%；在“复制”CSS 中？