html:

　　<div class="title">
　　　　<div class="line"></div>
　　　　<div class="text">ddd</div>
　　　　<div class="line"></div>
　　</div>

css:

　　.title{width:80%;display:flex;margin:30px auto 24px;}
　　.line{flex:1;border-top:1px solid rgba(255,255,255,0.2);position: relative;top:6px;}
　　.text{padding:0 12px;font-size:14px;}

经典的横线中间文字css布局---flex布局的更多相关文章

  1. CSS的flex布局(转载)

    我们之前已经学过一些布局模型,比如说浮动,绝对定位等等,但是这些布局方式一是不够简洁,而是使用的范围确实是太窄了. flex模型拥有比较多的属性,来设置多样的布局方式,接下来我们就详细介绍各种属性对布 ...

  2. css的flex布局调试

    学习经验-css的flex布局 今天遇到一个小问题 在给三个div布局时,设置父元素display:flex 此时三个div的宽度均为50%,他们并没有超出屏幕的宽度,还是撑满了父元素. 为什么呢? ...

  3. “妄”眼欲穿-CSS之flex布局和边框阴影

    妄:狂妄: 不会的东西只有怀着一颗狂妄的心,假装能把它看穿吧. 作为一个什么都不会的小白,为了学习(zb),特别在拿来主义之后写一些对于某些css布局的总结,进一步加深对知识的记忆.知识是人类的共同财 ...

  4. CSS之FLex布局介绍

    网页布局(layout)是CSS的一个重点应用. img 布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如, ...

  5. CSS之Flex 布局：语法篇

    网页布局(layout)是 CSS 的一个重点应用. ​ 布局的传统解决方案,基于盒状模型,依赖 display 属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如 ...

  6. CSS之Flex 布局

    Flex 布局教程:语法篇 网页布局(layout)是 CSS 的一个重点应用. 布局的传统解决方案,基于盒状模型,依赖 display 属性 + position属性 + float属性.它对于那些 ...

  7. CSS的flex布局和Grid布局

    一.什么是 flex 布局 2009年,W3C 提出了一种新的方案----Flex 布局,可以简便.完整.响应式地实现各种页面布局.目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这 ...

  8. 微信小程序CSS之Flex布局

    转载:https://blog.csdn.net/u012927188/article/details/83040156 相信刚开始学习开发小程序的初学者一定对界面的布局很困扰,不知道怎么布局,怎么摆 ...

  9. 通过游戏来学习CSS的Flex布局

    在复习Flex 布局的时候发现的了几个有趣的小游戏,在这里分享并记录几个有难度的答案 1. Flexbox Froggy 通过调整CSS样式来使各种青蛙回到对应的荷叶上,游戏默认难度为Beginner ...

随机推荐

  1. SSD-实现

    一.制作voc数据集 1.数据集文件夹 新建一个文件夹,用来存放整个数据集,或者和voc2007一样的名字:VOC2007 然后像voc2007一样,在文件夹里面新建如下文件夹: 2.将训练图片放到J ...

  2. struts2中标签库访问静态成员

    struts2中是可以访问静态成员的,需要以下设置: 1.设置配置文件 struts.xml 中如下: <!-- 设置运行通过ONGL访问静态方法 --> <constant nam ...

  3. win10如何设置开机自动启动热点WIFI？

    1.编写脚本文件(先新建txt文件,编写代码内容netsh wlan start hostednetwork,最后重命名成HotSpot.bat):文件名称:HotSpot.bat,代码内容: net ...

  4. caioj 1075 动态规划入门（中链式2：能量项链）（中链式dp总结）

    我又总结了一种动归模型-- 这道题和上一道题很类似,都是给一个序列,然后相邻的元素可以合并 然后合并后的元素可以再次合并 那么就可以用这两道题类似的方法解决 简单来说就是枚举区间,然后枚举断点 加上断 ...

  5. Option可选值（一）

    //: Playground - noun: a place where people can play import Cocoa class Person { var residence: Resi ...

  6. 一起talk C栗子吧（第八十一回：C语言实例--进程停止）

    各位看官们,大家好,上一回中咱们说的是进程相互排斥的样例,这一回咱们说的样例是:进程停止.闲话休提,言归正转. 让我们一起talk C栗子吧! 我们在前面的章回中介绍了怎样创建进程,只是没有介绍停止进 ...

  7. windows開始菜单和任务栏图标显示空白而且点击时候显示项目已被移动或删除

    这几天实验室老常常自己主动断电.这是非常蛋疼的一件事,这不上次断电就出事了.来电后开机,点击任务栏上的程序全都显示为无法打开此项目,该项目已被移动.删除.原因是图标缓存丢失,可能是突然断电引起的,也有 ...

  8. 小贝_php+redis类型组合使用

    php_redis类型组合使用 一.类型组合说明 经过前面的文章介绍.已经知道redis有字符串.集合.列表.hash等内置数据类型. 这里以,无序集合为例,进行说明. 集合 set1的简图 1.从简 ...

  9. legend---三、方法集思路

    legend---三.方法集思路 一.总结 一句话总结:其实也就是工具包思路,会极大的简化编程,清晰逻辑 1.多if转换成简洁单if怎么实现? 下面这段代码是错的,if的这种写法只适合直接return ...

  10. 如何组织CSS？

    前端工程师在开发一个单页面或者小网站的时候有可能不会在意CSS的组织问题,但如果要开发一个中大型的网站,就要好好的组织CSS文件,不然会增加维护成本,整个网站的结构也没条理性. 如何组织CSS?一般常 ...