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

最新推荐文章于 2024-05-29 14:36:52 发布

piaokongyu

最新推荐文章于 2024-05-29 14:36:52 发布

阅读量841

点赞数

分类专栏：随手笔记

本文链接：https://blog.csdn.net/piaokongyu/article/details/61915502

版权

随手笔记专栏收录该内容

5 篇文章 0 订阅

订阅专栏

效果：

解决方案：

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>