最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
css实现垂直水平居中实例代码
时间:2022-06-25 09:38:30 编辑:袖梨 来源:一聚教程网
首先我们我们想到居中就是相对于当前窗口,上边距和左边距各一半即可,于是有了下边的css样式:
代码如下 | 复制代码 |
.center |
我们很快发现,问题还没有真正解决,
要实现居中,我们要将对象向左、向上分别移动图片宽度、高度的一半,所以最终的样式如下:
代码如下 | 复制代码 |
.center
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. |
[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]
上一个高度是用的绝对单位px,并且没有隐藏溢出,下一个高度用的单位是相对单位em,并且隐藏了溢出。如果你的浏览器支持放大字体,那么尽情地放大字体,看看会出现什么效果。
二、多行内容居中,且容器高度可变
也很简单,给出一致的 padding-bottom 和 padding-top 就行
代码如下 | 复制代码 |
.middle-demo-2{ |
优点:
1. 同时支持块级和内联极元素
2. 支持非文本内容
3. 支持所有浏览器
缺点:
容器不能固定高度
三、把容器当作表格单元
CSS 提供一系列diplay属性值,包括 display: table, display: table-row, display: table-cell 等,能把元素当作表格单元来显示。这是再加上 vertical-align: middle, 就和表格中的 valign="center" 一样了。
代码如下 | 复制代码 |
.middle-demo-3{ display: table-cell; height: 300px; vertical-align: middle; } |
可惜IE不支持这些属性,不过在其他浏览器上显示效果非常完美。
要注意的是:和一个合法的
相关文章
- 《燕云十六声》有没有女角色 12-25
- 《燕云十六声》有没有pvp 12-25
- 《燕云十六声》有没有主机版 12-25
- 《燕云十六声》闪退解决办法 12-25
- 《燕云十六声》能不能用手柄玩 12-25
- 《燕云十六声》少侠捏脸数据大全 12-25
热门栏目
-
php教程
php入门 php安全 php安装 php常用代码 php高级应用 -
asp.net教程
基础入门 .Net开发 C语言 VB.Net语言 WebService -
手机开发
安卓教程 ios7教程 Windows Phone Windows Mobile 手机常见问题 -
css教程
CSS入门 常用代码 经典案例 样式布局 高级应用 -
网页制作
设计基础 Dreamweaver Frontpage js教程 XNL/XSLT -
办公数码
word excel powerpoint 金山WPS 电脑新手 -
jsp教程
Application与Applet J2EE/EJB/服务器 J2ME开发 Java基础 Java技巧及代码