水平垂直居中
2016-05-05 23:56
253 查看
首先,我们来了解水平居中,它有很多种方法,我们暂时先来了解其中的几种:
1. 在实现方案中,我们最熟悉的莫过于给元素定义一个宽度,然后使用margin:
?
这个是当我们的定义元素的宽度时显现的,如果我们不能定义宽度时,该怎么办呢?
2. 我们对于定位也是常用的,在这里当然也可以采用定位的方法来实现:
?
3. 既然定位可以,那浮动也是可以的:
?
4. 对于几个元素同时居中在一条线上:
?
5. 利用table:
?
6. 还可以使用inline-block来实现,但要使用这个就得在其父元素上设置text-align.如下:
?
实现垂直居中的四种方法:
1. 只能是单行文本居中(可适用于所有浏览器):
?
2. 跟水平居中一样,垂直也可以用定位的方法:
?
定位的方法,它的缺点是当没有足够的空间时,元素会消失。
3. 对此,浮动也是可以的:
?
对于浮动,我们需要在之后清除,并显示在中间。
4. 也可以使用vertical-align属性:
?
这种方法可以随意改变元素高度,但在IE8中无效。
现在来看个div模块在屏幕中居中的例子:
?
这个基本可以不确定宽高的模块居中,但是在低版本的浏览器中可能出现问题,现在还没测试过,但是主流的都是可以的!
1. 在实现方案中,我们最熟悉的莫过于给元素定义一个宽度,然后使用margin:
?
2. 我们对于定位也是常用的,在这里当然也可以采用定位的方法来实现:
?
?
?
?
?
1. 只能是单行文本居中(可适用于所有浏览器):
?
?
3. 对此,浮动也是可以的:
?
4. 也可以使用vertical-align属性:
?
现在来看个div模块在屏幕中居中的例子:
?
相关文章推荐
- 【原创】微信双开是定时炸弹?关于非越狱iOS上微信分身高危插件ImgNaix的分析
- 计算机系统结构 计算机系统结构的基本概念
- Leetcode 63. Unique Paths II 路径搜寻2 解题报告
- 劈荆斩棘:Gitlab 部署 CI 持续集成
- 20150206--JS巩固与加强4
- Unity5.0 EventSystem事件系统的详细说明
- android音乐播放器之在线播放功能的实现
- opencv3.1 + cmake3.5.2 + vs2015 配置
- circle area
- 本博客纯粹记录自己的java,Android学习过程
- #奇葩论--在C语言中利用函数递归创建链表#
- [生活]让人伤心的“百度”
- text() or html() 获取 td 内容
- Java IO流之简单使用方法
- linux 下安装 搭建 svn服务器
- 关于properties文件读取
- More Effective C++----(14)审慎使用异常规格(exception specifications)
- linux常用基本命令
- 1021,个位数统计,PAT
- 我的成就故事