div中的内容垂直居中的五种方法
来源:互联网 发布:系统封装软件 编辑:程序博客网 时间:2024/05/17 06:16
div中的内容垂直居中的五种方法
一、行高(line-height)法
如果要垂直居中的只有一行或几个文字,那它的制作最为简单,只要让文字的行高和容器的高度相同即可,比如:
1
p { height:30px; line-height:30px; width:100px; overflow:hidden; }
这段代码可以达到让文字在段落中垂直居中的效果。
二、内边距(padding)法
另一种方法和行高法很相似,它同样适合一行或几行文字垂直居中,原理就是利用padding将内容垂直居中,比如:
1
p {
padding
:
20px
0
; }
这段代码的效果和line-height法差不多。
三、模拟表格法
将容器设置为display:table,然后将子元素也就是要垂直居中显示的元素设置为display:table-cell,然后加上vertical-align:middle来实现。
html结构如下:
1
2
3
4
5
6
<
div
id
=
"wrapper"
>
<
div
id
=
"cell"
>
<
p
>测试垂直居中效果测试垂直居中效果</
p
>
<
p
>测试垂直居中效果测试垂直居中效果</
p
>
</
div
>
</
div
>
css代码:
1
2
#wrapper {
display
:table;
width
:
300px
;
height
:
300px
;
background
:
#000
;
margin
:
0
auto
;
color
:
red
;}
#cell{
display
:
table-cell
;
vertical-align
:
middle
;}
实现如图所示:
遗憾的是IE7及以下不支持。
四、CSS3的transform来实现
css代码如下:
1
2
3
4
5
6
7
8
9
.center-vertical{
position
:
relative
;
top
:
50%
;
transform:translateY(
-50%
);
}.center-horizontal{
position
:
relative
;
left
:
50%
;
transform:translateX(
-50%
);
}
五、css3的box方法实现水平垂直居中
html代码:
1
2
3
4
5
6
7
<
div
class
=
"center"
>
<
div
class
=
"text"
>
<
p
>我是多行文字</
p
>
<
p
>我是多行文字</
p
>
<
p
>我是多行文字</
p
>
</
div
>
</
div
>
css代码:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
.
center
{
width
:
300px
;
height
:
200px
;
padding
:
10px
;
border
:
1px
solid
#ccc
;
background
:
#000
;
color
:
#fff
;
margin
:
20px
auto
;
display
: -webkit-box;
-webkit-box-orient: horizontal;
-webkit-box-pack:
center
;
-webkit-box-align:
center
;
display
: -moz-box;
-moz-box-orient: horizontal;
-moz-box-pack:
center
;
-moz-box-align:
center
;
display
: -o-box;
-o-box-orient: horizontal;
-o-box-pack:
center
;
-o-box-align:
center
;
display
: -ms-box;
-ms-box-orient: horizontal;
-ms-box-pack:
center
;
-ms-box-align:
center
;
display
: box;
box-orient: horizontal;
box-pack:
center
;
box-align:
center
;
}
结果如图:
-----------------------------------------------------
转载请注明来源此处
原地址:http://blog.mn886.net/chenjianhua/show/0ecd71c7db09/index.html
阅读全文
0 0
- div中的内容垂直居中的五种方法
- div中的内容垂直居中的五种方法
- div中的内容垂直居中的五种方法
- div中的内容垂直居中的五种方法
- div中的内容垂直居中的五种方法
- div中的内容垂直居中的五种方法
- div中的内容-图片img垂直居中的五种方法
- 解决div中元素垂直居中的五种方法
- div垂直水平居中的五种方法
- div中的内容垂直居中
- div + css div中的内容垂直居中
- div 垂直 居中的几种 方法
- div垂直居中的N种方法
- div垂直居中的几种方法
- div垂直居中的N种方法
- div垂直居中的n种方法
- div 垂直居中的六种方法
- 如何让div中的内容垂直居中
- opencv序列图像ROI获取
- iOS从info.plist获取项目的名称及版本号
- 【LeetCode】566 Reshape the Matrix
- MFC创建文件并写入文件数据
- Unity游戏UI框架(五):配置管理
- div中的内容垂直居中的五种方法
- PHP文件上传实现上传到另一台服务器
- Java 反射 java.lang.reflect包
- 图文详解YUV420数据格式
- Mac平台的docker 代理之两个privoxy
- 技术博客二:Handler的机制
- Static
- 数据结构-队列
- 技术博客三:JSOUP的简单应用