从零开始学习html（十五）css样式设置小技巧——…
2018-06-24 01:23:01来源：未知 阅读 ()
六、垂直居中-父元素高度确定的单行文本
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>垂直居中</title> 6 <style> 7 8 .wrap h2{ 9 margin:0; 10 height:100px; 11 12 background:#ccc; 13 } 14 </style> 15 </head> 16 17 <body> 18 19 <!--下面是代码任务部分--> 20 <div class="wrap"> 21 <h2>hi,imooc!</h2> 22 </div> 23 </body> 24 </html>
我们在实际工作中也会遇到需要设置垂直居中的场景，比如好多报纸的文章标题在左右一侧时，常常会设置为垂直居中，为了用户体验性好。
这里我们又得分两种情况：父元素高度确定的单行文本，以及父元素高度确定的多行文本。
我们先来看第一种父元素高度确定的单行文本, 怎么设置它为垂直居中呢？
父元素高度确定的单行文本的竖直居中的方法是通过设置父元素的 height 和 line-height 高度一致来实现的。
(height: 该元素的高度，line-height: 顾名思义，行高（行间距），指在文本中，行与行之间的 基线间的距离 )。
line-height 与 font-size 的计算值之差，在 CSS 中成为“行间距”。分为两半，分别加到一个文本行内容的顶部和底部。
这种文字行高与块高一致带来了一个弊端：当文字内容的长度大于块的宽时，就有内容脱离了块。
如下代码：
<div class="container">
hi,imooc!
</div>
css代码：
<style>
.container{
height:100px;
line-height:100px;
background:#999;
}
</style>
任务
来试试：补充代码使 h2 中的文本垂直方向居中。
- 这里的父元素指的是单行文本的容器。height为父元素的内容高度，line-height为行间距，不是行高。
- 大家可以在例子中通过<br/>再加一行文字就看出来。行间距100px意味着单行文本的上边有50px，下边有50px，
- 当有下一行的时候，当前行的下边50px和下一行的上边50px构成了两行的行间距100px。
- 所以，这里设置父元素height和行间距相等，保证了当行文本垂直居中。
- height是块高度，line-height是单行高度。正常理解，在没有div的页面中，在一行里面，文字是垂直居中的。
- 即此时line-height=height(文本高度), 默认文字的单行高度是和文字的大小相关的，在此情况下，只显示一行的块，
- 人为指定的块高度和单行的高度就不相同，导致了文字不能垂直居中，
- 此时将单行高度强行设置为块高度，就去除了文字大小的影响，实现了文字的垂直居中效果！
- 垂直方向居中是指：在一个方框内，内容到顶线和到底线的距离相同，
- 通俗来说，就是内容到边框的两条水平线（这里的两条长边）的距离相同。
七、垂直居中-父元素高度确定的多行文本（方法一）
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>父元素高度确定的多行文本</title> 6 <style> 7 .wrap{height:300px;background:#ccc} 8 </style> 9 </head> 10 11 <body> 12 <table><tbody><tr><td class="wrap"> 13 <div> 14 <p>看我是否可以居中。</p> 15 <p>看我是否可以居中。</p> 16 <p>看我是否可以居中。</p> 17 <p>看我是否可以居中。</p> 18 <p>看我是否可以居中。</p> 19 </div> 20 </td></tr></tbody></table> 21 22 <!--下面是代码任务区--> 23 <div> 24 <img src="http://img.mukewang.com/54ffac56000169c001840181.jpg" title="害羞的小女生"/> 25 </div> 26 </body> 27 </html>
父元素高度确定的多行文本、图片等的竖直居中的方法有两种：
方法一：使用插入 table (包括tbody、tr、td)标签，同时设置 vertical-align：middle。
css 中有一个用于竖直居中的属性 vertical-align，在父元素设置此样式时，会对inline-block类型的子元素都有用。下面看一下例子：
html代码：
<body>
<table><tbody><tr><td class="wrap">
<div>
<p>看我是否可以居中。</p>
</div>
</td></tr></tbody></table>
</body>
css代码：
table td{height:500px;background:#ccc}
因为 td 标签默认情况下就默认设置了 vertical-align 为 middle，所以我们不需要显式地设置了。
任务
来试试：把小女生图片设置 为相对于浏览器窗口垂直居中。
八、垂直居中-父元素高度确定的多行文本（方法二）
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>父元素高度确定的多行文本</title> 6 <style> 7 .container{ 8 height:300px; 9 background:#ccc; 10 11 display:table-cell;/*IE8以上及Chrome、Firefox*/ 12 vertical-align:middle;/*IE8以上及Chrome、Firefox*/ 13 } 14 </style> 15 </head> 16 17 <body> 18 <div class="container"> 19 <div> 20 <p>看我是否可以居中。</p> 21 <p>看我是否可以居中。</p> 22 <p>看我是否可以居中。</p> 23 <p>看我是否可以居中。</p> 24 <p>看我是否可以居中。</p> 25 </div> 26 </div> 27 <!--下面是代码任务区--> 28 <div> 29 <img src="http://img.mukewang.com/54ffac56000169c001840181.jpg" title="害羞的小女生"/> 30 </div> 31 </body> 32 </html>
除了上一节讲到的插入table标签，可以使父元素高度确定的多行文本垂直居中之外，
本节介绍另外一种实现这种效果的方法。但这种方法兼容性比较差，只是提供大家学习参考。
在 chrome、firefox 及 IE8 以上的浏览器下可以设置块级元素的display 为 table-cell（设置为表格单元显示），
激活 vertical-align 属性，但注意 IE6、7 并不支持这个样式, 兼容性比较差。
html代码：
<div class="container">
<div>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
</div>
</div>
css代码：
<style>
.container{
height:300px;
background:#ccc;
display:table-cell;/*IE8以上及Chrome、Firefox*/
vertical-align:middle;/*IE8以上及Chrome、Firefox*/
}
</style>
这种方法的好处是不用添加多余的无意义的标签，但缺点也很明显，它的兼容性不是很好，不兼容 IE6、7而且这样修改display的block变成了table-cell，破坏了原有的块状元素的性质。
任务
来试试：如果你使用的是 chrome、firefox 及 IE8 以上的浏览器，你可以使用本小节的方法把右小女生的图片设置为垂直居中。
九、隐性改变display类型
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>隐性改变display类型</title> 6 <style> 7 .container a{ 8 position:absolute; 9 width:200px; 10 background:#ccc; 11 12 } 13 14 </style> 15 </head> 16 17 <body> 18 <div class="container"> 19 <a href="#" title="">进入课程请单击这里</a> 20 </div> 21 </body> 22 </html>
有一个有趣的现象就是当为元素（不论之前是什么类型元素，display:none 除外）设置以下 2 个句之一：
1. position : absolute
2. float : left 或 float:right
简单来说，只要html代码中出现以上两句之一，元素的display显示类型就会自动变为以 display:inline-block（块状元素）的方式显示，当然就可以设置元素的 width 和 height 了，且默认宽度不占满父元素。
如下面的代码，小伙伴们都知道 a 标签是 行内元素 ，所以设置它的 width 是 没有效果的，但是设置为 position:absolute 以后，就可以了。
<div class="container">
<a href="#" title="">进入课程请单击这里</a>
</div>
css代码
<style>
.container a{
position:absolute;
width:200px;
background:#ccc;
}
</style>
想不起 display:inline-block 是做什么的小伙伴们，可返回到前面小节进行复习。
任务
来试试：下面我们来试试 float 有没有这种功能。
把代码编辑器中的第 8 行改为 float:left ;看是否 width:200px 还起作用。
---------------------------------------END------------------------------------------------------------------------------------------
标签：
版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有
上一篇：base64编码
- DIV居中的经典方法 2020-06-13
- Html/css 列表项 区分列表首尾 2020-06-11
- HTML骨架 2020-06-10
- 转行Web前端工程师要掌握的学习知识汇总 2020-06-10
- HTML基础教程_1 2020-06-09
IDC资讯： 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营： 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程： Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术： Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧： 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作： FrontPages Dreamweaver Javascript css photoshop fireworks Flash
