关于的垂直居中的问题
2016-01-18 16:34
441 查看
居中分为垂直居中和水平居中,这里因为水平居中比较简单就不过多说了,然后垂直居中呢又分为以下几种情况种情况:
1、单行居中
这个也简单直接line-height为容器的高度就行了。
2、多行居中
和上面的单行居中差不多,只是line-height的值发生了变化,用容器高度除以行数,得到的结果就是line-height的值。
3、DIV垂直居中。这个也分为两种情况
3.1、DIV知道高度的情况,这里就需要用到定位,下面是具体代码。
但是这么做有一个地方不好,当我们的浏览器的高度缩小到一定的大小的时候,那么DIV就有一份看不见了,而且滚动条也不能滑动上去。这个问题,我还没找到具体的解决方法,如果哪位大神知道怎么解决,请评论告知下,不胜感谢!
3.2、DIV不知道高度的情况下,下面是具体代码
好了,这些差不多就是我遇到过得所有关于垂直居中的问题了,先写到这里,后面遇到了再总结。
1、单行居中
这个也简单直接line-height为容器的高度就行了。
2、多行居中
和上面的单行居中差不多,只是line-height的值发生了变化,用容器高度除以行数,得到的结果就是line-height的值。
3、DIV垂直居中。这个也分为两种情况
3.1、DIV知道高度的情况,这里就需要用到定位,下面是具体代码。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin: 0; padding: 0; } body{ width: 100%; height: 100%; } div{ width: 100%; height: 400px; position: absolute; top: 50%; left: 0; margin-top: -200px; background: red; } .box{ width: 100%; height: 380px; margin-top: -180px; background: black; } </style> </head> <body> <div> <div class="box"></div> </div> </body> </html>
但是这么做有一个地方不好,当我们的浏览器的高度缩小到一定的大小的时候,那么DIV就有一份看不见了,而且滚动条也不能滑动上去。这个问题,我还没找到具体的解决方法,如果哪位大神知道怎么解决,请评论告知下,不胜感谢!
3.2、DIV不知道高度的情况下,下面是具体代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body{ margin: 0; padding: 0; } html,body{ width:100%; height:100%; } .main{ text-align:center; width:100%; height:100%; display:table; } .box{ display:table-cell; vertical-align:middle; } </style> <!--[if lte ie 7]> <style> .main{ position:absolute; top:50%; height:auto; } .box{ position:relative; top:-50%; } </style> <![endif]--> </head> <body> <div class="main"> <div class="box"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid harum cupiditate mollitia placeat quam repellendus, expedita magni vitae officiis eaque dolor quis architecto illum, iure atque cum. Iusto, enim, animi. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi autem neque optio suscipit minus maiores id magnam porro, harum maxime! Maiores eum tempore quod quas rem, totam, vitae incidunt sed! </div> </div> </body> </html>
好了,这些差不多就是我遇到过得所有关于垂直居中的问题了,先写到这里,后面遇到了再总结。
相关文章推荐
- 建了个百度贴吧:图形底层吧
- jQuery表单input文本框默认说明文字获得焦点后消失效果
- 【ASP】利用数据库操作类优化数据库表的增删改查
- mybatis ${}与#{}区别
- 最大连续子序列之和
- Linux 内核配置机制(make menuconfig、Kconfig、makefile)讲解
- Linux 内核配置机制(make menuconfig、Kconfig、makefile)讲解
- 创业公司中运营人员的典型一天是怎么度过的?
- linux添加开机启动脚本
- Linux 内核配置机制(make menuconfig、Kconfig、makefile)讲解
- Xshell 连接CentOS服务器解密
- OS X thrift setup
- CHECK_NRPE: Received 0 bytes from daemon. Check the remote server logs for error messages.
- LeetCode String to Integer (atoi)
- css三种样式引入方法,html链接,html中<table>的使用方法
- html5元素简介<p>、<br/>、、background属性与bgcolor属性
- 设置列表(uitableview)顶端间隙
- 纯CSS控制背景图片100%自适应填充布局
- Hdu 1556 Color the ball
- Tomcat发布文件