css布局技巧-【文字居中，左右实线】

效果：

Paste_Image.png

解决方案：

1.html5标签

  <pre><code>`
        代码：
       css:
       fieldset{
         border: none;
         border-top: 1px solid red;
         text-align: center; 
       }
       legend{
         padding: 0 10px;
       }
       html:
       <fieldset>
        <legend>健康信息</legend>
      </fieldset>
  `</code></pre>

2.div模拟：
<pre><code>代码： css: .title{ position: relative; width: 100%; } .tx-center{ width: 160px; margin: 0 auto; text-align: center; background-color: #fff; font-size: 24px; } html: <div class="title"> <div class="tx-center">热门点评任务</div> </div></code></pre>