h5学习笔记:line-height和height组合居中
2016-04-27 22:44
417 查看
布局的时候经常使用到水平居中,所以 margin: 0 auto; 非常好用,前提是需要将div 设置一个宽度。
文本居中的时候,例如p标签,h2标签 使用 text-align: center; 对标签元素进行居中处理。
1.水平居中
.center{ width:1200px; margin: 0 auto; } <div class ='center'> 我要测试水平居中 </div>
文本居中的时候,例如p标签,h2标签 使用 text-align: center; 对标签元素进行居中处理。
2.垂直居中
经常使用ul 和li 无序列表的时候,li需要为其设置一个高度,同样设置line-height 则可以实现到垂直居中的效果。ul li{ height:80px; line-height: 80px; }
3. text-indent 文本缩进
使用文本缩进可以实现文本偏移位置,类似padding 缩进内距4. display: inline-block;
使用内块区别于block的使用,做到包住一个元素的周边,适合图片。 display: block; 显示整一个区块。5. 使用虚线 ;border:1px dashed #333;
有时候会需求hr是填充是虚线,于是可以对border:1px dashed #333;进行虚线处理。6. 圆角处理
使用border-radius: 10px; 对圆角进行处理。7. position: relative; 和position: absolute; 组合重叠一起排版
有时候经常需要在图片上编写文字效果。这个时候,在外层div 的时候需要设置相对定位,而在内置div的时候需要进行绝对定位设置文字排版。绝对定位的时候则会使用left 和top = 50%的做法 再配合margin的外边距的方式 margin 进行居中处理。8. opacity: 0.5; 透明度处理
使用opacity进行透明化处理。相关文章推荐
- 超炫的HTML5粒子效果进度条 VS 如何规范而优雅地code
- Html5实现自己的分页加载
- HTML5 video标签播放本地视频只有声音没有图像 解决办法
- HTML5——地图应用
- Web前沿—HTML5 Form Data 对象的使用
- HTML5——多次定位请求
- HTML5——单次定位请求
- HTML5定位系列_单次定位请求
- html5中画布的实现演示
- HTML5 PC端框架
- html5自带属性验证表单必填
- html5表单上传控件Files筛选指定格式的文件:accept属性过滤excel文件
- HTML5安全:CORS(跨域资源共享)简介。。。ie67 out。。。
- 基于Cloudera Manager 5和CDH5(版本5.3.3)的Hadoop集群安装
- HTML5应用之文件拖拽上传
- HTML5标签一
- HTML5_Canvas_属性、定义及方法
- HTML5 LocalStorage 本地存储
- 浅尝HTML5之canvas
- html5需遵循的6个设计原则