让一个div里面的其它div或者标签内容居中
来源:互联网 发布:audition for mac激活 编辑:程序博客网 时间:2024/06/06 09:45
方法1:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
.parent {
width
:
800px
;
height
:
500px
;
border
:
2px
solid
#000
;
position
:
relative
;
}
.child {
width
:
200px
;
height
:
200px
;
margin
:
auto
;
position
:
absolute
;
top
:
0
;
left
:
0
;
bottom
:
0
;
right
:
0
;
background-color
:
red
;
}
方法2:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
.parent {
width
:
800px
;
height
:
500px
;
border
:
2px
solid
#000
;
display
:
table-cell
;
vertical-align
:
middle
;
text-align
:
center
;
}
.child {
width
:
200px
;
height
:
200px
;
display
:inline-
block
;
background-color
:
red
;
}
方法3:
1
2
3
4
5
6
7
8
9
10
11
12
13
.parent {
width
:
800px
;
height
:
500px
;
border
:
2px
solid
#000
;
display
:flex;
justify-
content
:
center
;
align-items:
center
;
}
.child {
width
:
200px
;
height
:
200px
;
background-color
:
red
;
}
方法4:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.parent {
width
:
800px
;
height
:
500px
;
border
:
2px
solid
#000
;
position
:
relative
;
}
.child {
width
:
300px
;
height
:
200px
;
margin
:
auto
;
position
:
absolute
;
/*设定水平和垂直偏移父元素的50%,
再根据实际长度将子元素上左挪回一半大小*/
left
:
50%
;
top
:
50%
;
margin-left
:
-150px
;
margin-top
:
-100px
;
background-color
:
red
;
}
一、行高(line-height)法
如果要垂直居中的只有一行或几个文字,那它的制作最为简单,只要让文字的行高和容器的高度相同即可,比如:
p { height:30px; line-height:30px; width:100px; overflow:hidden; }
这段代码可以达到让文字在段落中垂直居中的效果。
二、内边距(padding)法
另一种方法和行高法很相似,它同样适合一行或几行文字垂直居中,原理就是利用padding将内容垂直居中,比如:
p { padding:20px 0; }
这段代码的效果和line-height法差不多。
三、模拟表格法
将容器设置为display:table,然后将子元素也就是要垂直居中显示的元素设置为display:table-cell,然后加上vertical-align:middle来实现。
html结构如下:
<div id="wrapper"> <div id="cell"> <p>测试垂直居中效果测试垂直居中效果</p> <p>测试垂直居中效果测试垂直居中效果</p> </div></div>
css代码:
#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代码如下:
.center-vertical{ position: relative; top:50%; transform:translateY(-50%);}.center-horizontal{ position: relative; left:50%; transform:translateX(-50%); }
五:css3的box方法实现水平垂直居中
html代码:
<div class="center"> <div class="text"> <p>我是多行文字</p> <p>我是多行文字</p> <p>我是多行文字</p> </div></div>
css代码:
.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;}
结果如图:
0 0
- 让一个div里面的其它div或者标签内容居中
- 让div里面标签居中的方法
- 内嵌div居中,div中嵌套div,让其里面的div居中显示
- 如何用DIV标签让内容居中显示出来
- div+css 怎么让一个小div在另一个大div里面 垂直居中
- div+css 怎么让一个小div在另一个大div里面 垂直居中
- 假如有一个固定高度的div,如何让里面的一个图片垂直居中?
- 让div标签里面的img标签的图片在任意分辨率下居中显示,两边多余的隐藏掉
- css3 如何让div里面的元素垂直居中
- div里面的div垂直居中
- 让嵌套div里面垂直居中
- 让div+css的div居中
- 如何让div中的内容垂直居中
- 如何让div中的内容垂直居中
- 如何让div中的内容垂直居中
- 如何让div中的内容垂直居中
- 如何让div中的内容垂直居中
- 如何让div中的内容垂直居中
- ROS universal_robot不支持jade
- Android binder机制
- vs2010发布、打包安装程序(超全超详细)
- Linux编程之ICMP洪水攻击
- imageNamed和imageWithContentsOfFile的区别
- 让一个div里面的其它div或者标签内容居中
- Ubuntu安装ssh
- FL Studio中如何使用粘合与琶音命令
- 关于JavaScript的prototype、__proto__、constructor、this
- oralce数据库pde导入的时候,报错:递归sql级别1出现错误 超出打开游标的最大数
- HighlightingSystem插件使用(边缘发光)
- Struts2继承ActionSupport接口
- 领域专用语言(DSL)简介
- C++内存分配方式详解——堆、栈、自由存储区、全局/静态存储区和常量存储区