结构-行为-样式-css&html横纵居中最佳实践
最近在做手机端的H5项目,有个标题是在一根横线中的,就是水平居中加垂直居中(如图一)。这应该是前端开发中经常遇到的一个场景了,做的次数多了就有一些体会,我今天就总结了下这种结构的实现思路:首先,用元素的Border来做这根线;然后,线与文字在同一个父级元素下;最后,设置线为绝定位,文字相对定位,设置文字高度为线Margin值的两倍;
图一:
相应Html:
<div> <div class="top-line"></div> <div class="top-zone"> <div class="zone-title">精选留言</div> </div> </div>
相应Css:
.comment .top-zone{padding:0 5%;height:90px;text-align:center;position:relative;} .comment .top-line{width:92%;margin:0 4%;border-top:2px solid #ddd;margin-top:45px;position:absolute;display:inline-block;} .comment .top-zone .zone-title{display:inline-block;width:70px;padding:3px 15px;margin-top:31px;background-color:#f3f3f3;color:#666;}
好了,这应该就是一种我个人用的最多的搞定这种布局的方法了,欢迎留言交流!
结构-行为-样式-css&html横纵居中最佳实践的更多相关文章
- CSS 6种完全居中最佳实践(整理)
2016年4月28日 1.最佳法: .Absolute-Center { width: 50%; height: 50%; overflow: auto; margin: auto; position ...
- 结构-行为-样式-Css Div 居中的一个最佳实践
最近在做项目的时候,经常会有需要各种居中的情况,现在分享一个最佳实践. <div class="success-bottom"> <div class=" ...
- CSS UNIT 详解以及最佳实践
分类 ■ 绝对长度(Absolute units):cm,mm,in,pt,pc 绝对单位之间的换算:1in = 2.54cm=25.4mm=72pt=6pc 绝对长度在css中的表现和其他地方 ...
- 结构-行为-样式-Css笔记
0.常见的行级元素和块级元素: 行级元素:div,table,form ,ul,ol,p,h1-h6,hr; 块级元素:a,select,input,textarea,img,label,br,i, ...
- CSS media query应用中的层叠特性使用最佳实践
media query是css3规范中引入的,它提供了一种responsive design的基础机制:浏览器在不同size的设备中将以不同样式展现网页,这就给一个网页能够适应不同device一种可能 ...
- Html 常见标签,css基础样式,css的浮动和清流,浏览器的兼容
1.html模板<!DOCTYPE html><html><head> <meta charset="UTF-8"> <tit ...
- 【CSS】如何在一个页面中引入样式css
CSS(Cascading Style Sheet)又叫层叠样式表.是我们学习前端必不可少的一门语言,学习它其实就是为了学会如何去更改页面标签的样式.目前使用最广的是css3,但同样的,他是从css2 ...
- node.js入门学习(二)MIME模块,request和response对象,demo之不同url请求不同html页面,页面包含图片、样式css等静态资源
一.构建http服务程序-根据不同请求做出不同响应 // 加载http模块 var http = require("http"); // 创建一个http服务对象 http.cre ...
- FontAwesome 4.7.0 中完整的675个图标样式CSS参考
FontAwesome 4.7.0 中完整的675个图标样式CSS参考 用法:首先引入CSS文件:<link href="https://maxcdn.bootstrapcdn.com ...
随机推荐
- Sql Server 存储过程中查询数据无法使用 Union(All)
原文:Sql Server 存储过程中查询数据无法使用 Union(All) 微软Sql Server数据库中,书写存储过程时,关于查询数据,无法使用Union(All)关联多个查询. 1.先看一段正 ...
- POJ 1655 Balancing Act 焦点树
标题效果:鉴于一棵树.除去一个点之后,这棵树将成为一些中国联通的块.之后该点通过寻求取消最低形成块的最大数目. 思维:树DP思维.通过为每个子树尺寸的根节点深搜索确定.之后该节点然后除去,,还有剩下的 ...
- C# 打开网页兼容Windows8.1的方式
方法:指定浏览器 void WebWithDefaultBrower() { string name = string.Empty; try { string mainKey = @"htt ...
- 2.3 LINQ查询表达式中 使用select子句 指定目标数据
本篇讲解LINQ查询的三种形式: 查询对象 自定义查询对象某个属性 查询匿名类型结果 [1.查询结果返回集合元素] 在LINQ查询中,select子句和from子句都是必备子句.LINQ查询表达式必须 ...
- 临时和永久修改oracle sysdate的默认输出格式
1.当前会话有效 alter session set NLS_DATE_FORMAT='YYYY-MM-DD:HH24:MI:SS'; 2.永久生效 sys用户登入后执行如下命令 然后重启数据库使其生 ...
- solr中重跑索引
solr与.net系列课程(八)solr中重跑索引的注意事项 solr与.net系列课程(八)solr中重跑索引的注意事项 我们如果在项目中使用solr,那肯定就是把数据库中的数据跑进solr服务 ...
- SuspendLayout()了解方法
SuspendLayout()暂时挂起的布局逻辑控制(msdn),它ResumeLayout()在会同.我的理解是,使用SuspendLayout()让整个窗体站,等到所有的东西都设置齐全,然后Re ...
- c#生成word文档
参考:http://blog.163.com/zhouchunping_99/blog/static/7837998820085114394716/ 生成word文档 生成word文档 view pl ...
- 控制台命令行API
js调试系列: 控制台命令行API 上次初步介绍了什么是控制台<js调试系列: 初识控制台>,以及简单的 console.log 输出信息.最后还有两个小问题,我们就当回顾,来看下怎么 ...
- strus2 action重复执行问题
近日做项目,有两个模块功能类似,就写到了一个action中,方法起名为getXXX1,getXXX2 最后在两个模块去调用的时候,分别调用DemoAction!getXXX1.action和DemoA ...