美文网首页
css布局技巧-【文字居中,左右实线】

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

作者: 飘空鱼 | 来源:发表于2017-06-14 22:04 被阅读0次

效果:

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>

相关文章

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

    效果: 解决方案: 1.html5标签 2.div模拟: 代码: css: .title{ position: ...

  • css布局和居中

    本文主要介绍了css常用的布局,居中等其他小技巧。 css布局 左右布局 利用float实现左右布局 左右模块设置...

  • CSS布局与技巧

    本文将简单介绍如何使用CSS做出以下效果: 左右布局 左中右布局 水平居中 垂直居中 其他小技巧 一、左右布局 左...

  • CSS布局小介绍,欢迎大佬点评

    该篇主要介绍CSS的左右布局、左中右布局、水平居中、垂直居中,以及一些小技巧 左右布局 左右布局,顾名思义就是将元...

  • 使用CSS做出常用布局

    以下用CSS介绍如何做出 左右布局左中右布局水平居中垂直居中其他小技巧 一、左右布局 方法一:对于块元素采用给爸爸...

  • CSS布局与定位入门

    声明:本文为转载如何使用CSS做出: 左右布局 左中右布局 水平居中 垂直居中 等其他小技巧 一、水平居中 1.m...

  • CSS布局与居中

    这篇文章会介绍本人已学会的CSS中常用的左右布局、左中右布局、水平居中方法、垂直居中方法和一些CSS小技巧,如有错...

  • CSS布局技巧总结

    目录 详解 CSS 七种三栏布局技巧 16种方法实现水平居中垂直居中 详解 CSS 七种三栏布局技巧 三栏布局,顾...

  • 无标题文章

    css左右布局 两个块级元素实行左右布局. 左中右布局 水平居中 块级元素水平居中 内联元素居中 垂直居中 行内元...

  • html编程技巧

    字体外部描边 Css 基于flex布局的盒子上下居中 Css 基于flex布局的盒子左右居中 Css 基于flex...

网友评论

      本文标题:css布局技巧-【文字居中,左右实线】

      本文链接:https://www.haomeiwen.com/subject/ahvhettx.html