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. codeforces 544 D Destroying Roads 【最短路】

    题意:给出n个点,m条边权为1的无向边,破坏最多的道路,使得从s1到t1,s2到t2的距离不超过d1,d2 因为最后s1,t1是连通的,且要破坏掉最多的道路,那么就是求s1到t1之间的最短路 用bfs ...

  2. Ubuntu18.04 解压zip文件乱码的解决方法

    在Ubuntu的系统下解压zip文件的时候居然出现了乱码,通过查找网上的资料,解决的办法有两种 一.通过unzip行命令解压,指定字符集,由于zip格式中并没有指定编码格式,Windows下生成的zi ...

  3. 欧拉函数 euler

    O - 找新朋友   1.欧拉函数 euler() 在数论,对正整数n,欧拉函数是  少于或等于n的数中与n 互质 的数的数目. 互质:公约数只有 1 的两个整数,称为互质整数.即 最大的公约数也就是 ...

  4. [POI2010]GIL-Guilds（结论题）

    题意 给一张无向图,要求你用黑白灰给点染色,且满足对于任意一个黑点,至少有一个白点和他相邻:对于任意一个白点,至少有一个黑点与他相邻,对于任意一个灰点,至少同时有一个黑点和白点和灰点与他相邻,问能否成 ...

  5. conda常用命令，如何在conda环境中安装gym库？

    查看已安装的环境: conda info -e 或 conda env list 创建新环境gymlab: conda create -n gymlab python=3.5 激活环境gymlab: ...

  6. TCP 三次握手，四次挥手

    TCP 三次握手,四次挥手 1. TCP 三次握手 建立连接前,客户端和服务端需要通过握手来确认对方: 客户端发送 syn(同步序列编号) 请求,进入 syn_send 状态,等待确认 服务端接收并确 ...

  7. uva 473(dp)

    题意:按创作时间给出n首歌每首歌的时间ti,然后按创作时间装到m个光盘内,给出光盘最大分钟数t,问m个光盘最多总共放多少首歌. 题解:对于每首歌都能够选或者不选,假设选择了这首歌,是否把这首歌当做第j ...

  8. FZOJ 2176 easy problem ( 树链剖分 )

    pid=2176" target="_blank">题目链接~~> 做题感悟:感觉做多了树链剖分的题目,有很多是树链剖分 + 想法.. 解题思路: 这题非常明 ...

  9. caioj1443:第k小的数Ⅲ

    [传送门:caioj1443] 简要题意: 给出一颗n个点的树,给出每个点的权值,再给出n-1条边,有m个询问,每个询问输入x,y,k,输出第x节点到第y节点的路径上第k大的点 题解: 这是一道主席树 ...

  10. spring xml配置文件根元素（文件头文件）说明

    <?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.sp ...