利用vertical-align:middle实现在整个页面居中
如果想让一个div或一张图片相对于整个页面居中,用vertical-align:middle可以很简单地解决。
就以一个404页面为例,看如何让一张图片相对于整个页面居中,如下图:
这是一个404页面,里面就只有一张图片,点击图片可以回到首页,而且这个图片是相对于整个页面居中的,无论是水平还是垂直(PS:这可算是我做404页面最为习惯的一种懒人做法了,越简单越好,要想好看的话,直接用photoshop做一张好看一点的图片就好了~)。
接下来看一下它的html代码:
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 3 <html xmlns="http://www.w3.org/1999/xhtml"> 4 <head> 5 <title>404页面</title> 6 </head> 7 <body> 8 <div class="wall"> 9 <a href="index.html"><img class="img404" src="data:images/404.jpg" alt="404页面" /></a>10 </div>11 </body>12 </html>
代码很简单,就一个class="wall"的div标签,一个a标签,一个class=“img404”的img标签。
接下来就是写css了,先让class="wall"的div的宽和高都为100%,以填充整个页面,CSS如下:
1 <style type="text/css">2 body{ margin:0; background:#333; _height:100%;}3 .wall{ width:100%; height:100%; position:absolute; left:0; top:0; text-align:center;}4 .img404{ border:0;width:700px;}5 </style>
以上CSS里面值得一说的恐怕就是为什么要用绝对定位(position:absolute)以及_height:100%这个样式了;我试了很多 方法,结果我只能用绝对定位才能让它的height:100%生效,当然固定定位(position:fixed)也是可以的,可是IE6不支 持;_height:100%是为了兼容IE6,让class="wall"的div在IE6里也能高度为100%。如果想验证一下 class="wall"的div现在是否已经填充了整个页面,不妨在.wall里面设一个背景色就可以知道了,这里我就不做实验了。
目前整页的代码如下:
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 3 <html xmlns="http://www.w3.org/1999/xhtml"> 4 <head> 5 <title>404页面</title> 6 <style type="text/css"> 7 body{ margin:0; background:#333; _height:100%;} 8 .wall{ width:100%; height:100%; position:absolute; left:0; top:0; text-align:center;} 9 .img404{ border:0; width:700px;}10 </style>11 </head>12 <body>13 <div class="wall">14 <a href="index.html"><img class="img404" src="data:images/404.jpg" alt="404页面" /></a>15 </div>16 </body>17 </html>
效果如下:
接下来就利用vertical-align:middle来实现垂直居中了,因为class="wall"的div填充了整个页面,所以只要让图片 在class="wall"的div里面垂直居中就达到目的了。以前总是以为vertical-align与text-align是同样的道理,一个是垂 直居中,一个是水平居中,只要给class="wall"的div加上一个vertical-align:middle就能让图片垂直居中,结果一点效果 也没有。事实上vertical-align与text-align完全不一样,给class="wall"的div加上一个text- align:center的话,毫无疑问是可以让里面的img水平居中,但vertical-align却不能这样子用。
先看一下W3C上对vertical-align的定义:vertical-align 属性设置元素的垂直对齐方式。该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。这会使元素降低而不是升高。在 表单元格中,这个属性会设置单元格框中的单元格内容的对齐方式。
必须承认这句话我看了很久才看懂说的是神马意思,我的理解是它有两种用法:
第一种用法,先看后面一句“在表单元格中,这个属性会设置单元格框中的单元格内容的对齐方式。”这很容易理解,如果给一个表格的td加一个 vertical-align:middle的样式,表格里面的内容会垂直居中,同样的如果给一个vertical-align:bottom就会底部对 齐,如果给一个vertical-align:top就会顶部对齐。
第二种用法,看前页一句“该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。”专业的语言我不会说的,可以打个比喻:假设有两个行内元 素a和b,a和b都是img,当a加了一个vertical-align:middle样式之后,b的底部(基线)就会对齐a的中间位置,如下图:
如果a和b都加了一个vertical-align:middle样式,那么就互相对齐了对方的中间位置,也就是它们在垂直方向上的中线对齐了,如下图:
说到这里,思路就清晰了(PS:理应知道vertical-align可以设middle,top,bottom等等,甚至可以设置具体的值或百分比,如果想知道会有怎样的效果,可以自己实验一下,这里就不多说了。)。
接下来回到这篇文章的主题,现在我要让class="img404"的img在class="wall"的div里面垂直居中,我可以在div里面 加一个span空标签,把它的高度设为100%,再给它一个vertical-align:middle样式,同样地给img一个vertical- align:middle样式,那么img就可以在div里面垂直居中了。如图:
按照这个思路,完整的页面代码就出来了:
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 3 <html xmlns="http://www.w3.org/1999/xhtml"> 4 <head> 5 <title>404页面</title> 6 <style type="text/css"> 7 body{ margin:0; background:#333; _height:100%;} 8 .wall{ width:100%; height:100%; position:absolute; left:0; top:0; text-align:center; font-size:0;} 9 .img404{ border:0; width:700px; vertical-align:middle;}10 .verticalAlign{ vertical-align:middle; display:inline-block; height:100%; width:1px; margin-left:-1px;}11 </style>12 </head>13 <body>14 <div class="wall">15 <span class="verticalAlign"></span>16 <a href="index.html"><img class="img404" src="data:images/404.jpg" alt="404页面" /></a>17 </div>18 </body>19 </html>
以上的CSS里面值得一提的是.verticalAlign,加一个display:inline-block是为了触发它的layout,以让本 来没有layout的span可以设置宽和高,margin-left:-1px是为了让span左移一个像素,而令img在水平方向上回到正中位置;另 外.wall里面的font-size:0正如我上一篇文章所说的是为了消除代码换行所造成的空隙。
最终效果如下:
(PS:以上仅是个人理解,如有不同意见,或以上说法有错漏,欢迎指出。)
同样的原理可以实现文字居中,完整代码如下:
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 3 <html xmlns="http://www.w3.org/1999/xhtml"> 4 <head> 5 <title>无标题页</title> 6 <style type="text/css"> 7 .wrap{ width:1000px; height:100px; border:solid 1px #999; margin:0 auto; text-align:center;} 8 .verticalAlign{ vertical-align:middle; display:inline-block; height:100%; width:1px; margin-left:-1px;} 9 .textSpan{vertical-align:middle;}10 </style>11 </head>12 <body>13 <div class="wrap">14 <span class="verticalAlign"></span>15 <span class="textSpan">文字居中</span>16 </div>17 </body>18 </html>
效果如下:
转载于:https://www.cnblogs.com/shimily/articles/3917687.html
利用vertical-align:middle实现在整个页面居中相关推荐
- 前端htm cssl总结
第1章 HTML基础 (一) HTML文件的基本结构和W3C标准 l HTML用来描述网页的一种语言,他是一种超文本标记语言(Hyoer Text Markuo Language),HTML不是一 ...
- HTML5+CSS、CSS3基础知识点总结
一.选择器 选择器分为基础选择器和复合选择器两大类. 基础选择器由单个选择器组成 基础选择器包括:标签选择器.类选择器.id 选择器和通配符选择器(*) 标签选择器 优点 标签选择器可以把某一标签全部 ...
- html5怎么把图片垂直居中,css如何让img垂直居中?
css如何让img居中显示?对于刚刚css入门的新手可能还不是很熟悉,下面我们来总结一下css如何让img垂直居中? 一.使用flex实现垂直居中 利用 display: flex;align-ite ...
- CSS布局解决方案(终结版)
前端布局非常重要的一环就是页面框架的搭建,也是最基础的一环.在页面框架的搭建之中,又有居中布局.多列布局以及全局布局,今天我们就来总结总结前端干货中的CSS布局. 居中布局 水平居中 1)使用inli ...
- css+js+jq实训笔记
css+js+jq实训笔记 css第一天 css第二天 css第三天 css第四天 css第五天 css第六天 js第一天 js第二天 js第三天 js第四天 js第五天 js第六天 jq第一天 jq ...
- 如何使html中的din居中,CSS 实现完美垂直居中
<?xml version="1.0" encoding="utf-8"?>ttp://www.w3.org/TR/xhtml1/DTD/xhtml ...
- 大众点评封ip,还字体加密?我直呼,就这啊!
像旧巷子里的猫,我很自由,但没有归宿 假如csdn有创作激励该多好,那样就可以天天"水"博客了! 哈喽,大家好,上期给大家伙分享了一期微博数据的爬取 Python爬取微博评论数据, ...
- GridView To Excel
将GridView的内容导出到Excel中 原文来自:http://gridviewguy.com/ArticleDetails.aspx?articleID=197 介绍: 将GridView的内容 ...
- django oracle 性能,4.利用Django在前端展示Oracle 状态趋势
利用Django在前端展示Oracle 状态趋势 2017-12-15 Python 宅必备 开发环境 操作系统:CentOS 7.4 Python版本 :3.6 Django版本: 1.10.5 操 ...
- aardio利用sunny中间件实现只显示网页部分内容
前两天有个朋友有个需求,在利用aardio开发的软件打开一个网站时,首页只想显示部分内容,其他信息不显示.aardio的web.form有一个显示部分网页的范例,可以实现需求,但是用这种方式打开的网页 ...
最新文章
- ajax——实现三级联动下拉列表
- tensorflow基础-placeholder
- 使用Ajax的Time实现倒计时功能
- 谢少锋:云计算拉动技术进步 规模成倍增长
- Phaser开源2d引擎 javascript/html5游戏框架
- java exception子类_Java异常 Exception类及其子类(实例讲解)
- 召唤AI大神与病毒作战!Kaggle发起CORD-19数据集文本挖掘竞赛
- 51单片机数值存储c语言教程,单片机c语言教程:C51变量
- 中国英语学习论坛(2:考 研 英 语 资 料 索 引)
- base循环解码工具
- excel打不开html格式的文件,电脑excel无法打开提示“因为文件格式或文件扩展名无效”如何解决...
- [翻译] ogre 2.0 移植手册 - 4 合成器
- Unity Singleton 单例类
- 计算机显卡初始化失败,电脑显卡驱动安装失败原因,其解决办法
- 树枝学术 | 图书查找、论文查找全攻略
- 沃尔玛中国将采用唯链雷神区块链追踪食品供应链
- 横向扩展与纵向扩展区别详解
- 电工实验室基本生存技能 第一季第三集
- pyspider安装问题解决Please specify --curl-dir=/path/to/built/libcurl
- java获取emf中的文字_一键提取图片中的文字的5种方法!