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

最新推荐文章于 2025-11-15 14:06:28 发布

原创最新推荐文章于 2025-11-15 14:06:28 发布 · 904 阅读

0 ·

CC 4.0 BY-SA版权

随手笔记专栏收录该内容

5 篇文章

订阅专栏

本文介绍两种实现类似 HTML5 fieldset 和 legend 标签效果的方法：一种是直接使用 HTML5 的 fieldset 和 legend 标签，并通过 CSS 进行样式定制；另一种则是利用 div 元素进行模拟实现。

效果：

解决方案：

1.html5标签

 

            代码： 

           css: 

           fieldset{ 

             border: none; 

             border-top: 1px solid red; 

             text-align: center;  

           } 

           legend{ 

             padding: 0 10px; 

           } 

           html: 

           <fieldset> 

            <legend>健康信息</legend> 

          </fieldset>

2.div模拟：

 

            代码： 

           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>