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. Windows10显示桌面我的电脑等图标

    1.桌面右键,选择最后一项:个性化 2. 选择:主题 --> 桌面图标设置 3. 将需要显示的图标勾上就可以啦.

  2. centos 安装 aria2 webui 实现网页下载

    centos aria2 webui 安装aria2 安装 rpmforge源 wget http://repository.it4i.cz/mirrors/repoforge/redhat/el6/ ...

  3. 洛谷3833 [SHOI2012]魔法树

    SHOI2012 D2T3 题目描述 Harry Potter 新学了一种魔法:可以让改变树上的果子个数.满心欢喜的他找到了一个巨大的果树,来试验他的新法术. 这棵果树共有N个节点,其中节点0是根节点 ...

  4. Java web application——Listener

    应用程序事件提供ServletContext和HttpSession以及ServletRequest对象状态更改的通知,用户编写响应状态更改的事件监听器类,并配置和部署他们.Servlet容器会调用事 ...

  5. [WC2011]最大XOR和路径（线性基）

    P4151 [WC2011]最大XOR和路径 题目描述 XOR(异或)是一种二元逻辑运算,其运算结果当且仅当两个输入的布尔值不相等时才为真,否则为假. XOR 运算的真值表如下( 1 表示真, 0 表 ...

  6. WPF获得PNG图片外观Path数据

    原文:WPF获得PNG图片外观Path数据        WPF开发界面的时候,用的最多的就是自定义控件模板,开发人员需要根据UI的设计,做出符合要求的自定义控件.但是在一些特殊情况下,UI的设计可能 ...

  7. HDU 4462 Scaring the Birds (暴力枚举DFS)

    题目链接:pid=4462">传送门 题意:一个n*n的区域,有m个位置是能够放稻草人的.其余都是玉米.对于每一个位置(x,y)所放稻草人都有个作用范围ri, 即abs(x-i)+ab ...

  8. jfinal 后台文件上传(结合上一篇(h5 图片回显))

    前端用了jquery.form.js插件异步提交表单 $("#imgForm").ajaxSubmit();//户主头像 /** * * @description 上传户主头像 * ...

  9. Windows10上使用windbg调试Chromium Windows。

    ###目的###Windows10上使用windbg调试Chromium Windows. 安装Windows 10 SDK时, 就包含了windbg.exe."C:\Program Fil ...

  10. Pycharm在Ubuntu14.04中的基本使用指南

    前几天给大家分享了:如何在VMware虚拟机中安装Ubuntu14.04系统.今天给大家分享一下在Ubuntu14.04中如何简单的使用Pycharm.1.启动Pycharm,将进入Pycharm的启 ...