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. UI Framework-1: Aura Event Handling

    Event Handling A diagram of the architecture of this system:     HWNDMessageHandler owns the WNDPROC ...

  2. php实现自动加载类

    PHP 实现自动加载类:

  3. NodeJS学习笔记 进阶 (10)Nodejs 进阶：log4js入门实例(ok))

    个人总结:读完这篇文章讲解了log4js的使用,具体更多可以参考npmjs上看,读完这篇需要15分钟. 摘选自网络 对于线上项目用来说,日志是非常重要的一环.log4js是使用得比较多的一个日志组件, ...

  4. GenIcam标准介绍

    GenICam TM的目标是为各种相机和设备提供通用编程接口.无论他们使用什么接口技术(GigE Vision,USB3 Vision,CoaXPress,Camera Link HS,Camera ...

  5. struts2文件上传需要注意的

    ① 必须封装三个字段:文件.文件类型.文件名,而且这三个字段的名字的前面几个字母是一样的 如: private File upload; private String uploadContentTyp ...

  6. tp5框架知识点

    项目包含的关键点,后台,前台. 入口文件. 通用配置文件. 数据库配置文件. 共有文件,css,images,js. 控制器,模型,视图. 共有类. 共有函数. 属性,方法. 命名规范. 命名空间. ...

  7. 英语影视台词---二、Inception

    英语影视台词---二.Inception 一.总结 一句话总结:盗梦空间 1.You're waiting for a train..A train that will take you far aw ...

  8. C# double保留四位小数

    2.保留N位,四舍五入 . decimal d= decimal.Round(decimal.Parse("0.55555"),4); 3.保留N位四舍五入 Math.Round( ...

  9. 安装oracle常见问题分析

    1,之前已经安装过软件,卸载不完全 /tmp/.oracle /tmp/ora* /var/tmp/ora* /etc/ora* 2,安装介质权限或者本身就有问题 3,oracle用户 $/HOME/ ...

  10. win10下虚拟机安装XP系统 后无网卡的解决

    Windows 8提供了免费的虚拟机 Hyper-V, 但是在配置 Hyper-V虚拟机的时候经常遇到虚拟机无法上网,本文介绍的是: 原料   Windows 10 Hyper-V Windows X ...