六、垂直居中-父元素高度确定的单行文本

 <!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>垂直居中</title>
<style> .wrap h2{
margin:0;
height:100px; background:#ccc;
}
</style>
</head> <body> <!--下面是代码任务部分-->
<div class="wrap">
<h2>hi,imooc!</h2>
</div>
</body>
</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(文本高度), 默认文字的单行高度是和文字的大小相关的,在此情况下,只显示一行的块,
人为指定的块高度和单行的高度就不相同,导致了文字不能垂直居中,
此时将单行高度强行设置为块高度,就去除了文字大小的影响,实现了文字的垂直居中效果!
垂直方向居中是指:在一个方框内,内容到顶线和到底线的距离相同,
通俗来说,就是内容到边框的两条水平线(这里的两条长边)的距离相同。

七、垂直居中-父元素高度确定的多行文本(方法一)

 <!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>父元素高度确定的多行文本</title>
<style>
.wrap{height:300px;background:#ccc}
</style>
</head> <body>
<table><tbody><tr><td class="wrap">
<div>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
</div>
</td></tr></tbody></table> <!--下面是代码任务区-->
<div>
<img src="http://img.mukewang.com/54ffac56000169c001840181.jpg" title="害羞的小女生"/>
</div>
</body>
</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,所以我们不需要显式地设置了。

任务

来试试:把小女生图片设置 为相对于浏览器窗口垂直居中。

八、垂直居中-父元素高度确定的多行文本(方法二)

 <!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>父元素高度确定的多行文本</title>
<style>
.container{
height:300px;
background:#ccc; display:table-cell;/*IE8以上及Chrome、Firefox*/
vertical-align:middle;/*IE8以上及Chrome、Firefox*/
}
</style>
</head> <body>
<div class="container">
<div>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
</div>
</div>
<!--下面是代码任务区-->
<div>
<img src="http://img.mukewang.com/54ffac56000169c001840181.jpg" title="害羞的小女生"/>
</div>
</body>
</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类型

 <!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>隐性改变display类型</title>
<style>
.container a{
position:absolute;
width:200px;
background:#ccc; } </style>
</head> <body>
<div class="container">
<a href="#" title="">进入课程请单击这里</a>
</div>
</body>
</html>

隐性改变display类型

有一个有趣的现象就是当为元素(不论之前是什么类型元素,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------------------------------------------------------------------------------------------

从零开始学习html(十五)css样式设置小技巧——下的更多相关文章

  1. CSS样式设置小技巧

    1.水平居中设置 行内元素居中设置:如果被设置元素为文本.图片等行内元素时,水平居中是通过给父元素设置 text-align:center 来实现的.代码示例如下: HTML代码 <body&g ...

  2. 从零开始学习html(十五)css样式设置小技巧——上

    一.水平居中设置-行内元素 <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> ...

  3. HTML+CSS学习笔记 (15) - css样式设置小技巧

    水平居中设置-行内元素 我们在实际工作中常会遇到需要设置水平居中场景,今天我们就来看看怎么设置水平居中的. 如果被设置元素为文本.图片等行内元素时,水平居中是通过给父元素设置 text-align:c ...

  4. css学习の第六弹—样式设置小技巧

    一.css样式设置小技巧>>1.行内元素水平居中是通过给父元素设置 text-align:center 来实现的.html代码:<body> <div class=&qu ...

  5. Java开发桌面程序学习(十)——css样式表使用以及Button悬浮改变样式实现

    css样式表使用 javafx中的css样式,与html的有些不一样,javafx中的css,是以-fx-background-color这种样子的,具体可以参考文档JavaFx css官方文档 ja ...

  6. 201671010140. 2016-2017-2 《Java程序设计》java学习第十五周

    java学习第十五周 Java的GUI界面设计,框架以及主要部件填充,归置,布局管理,在第十一章和第十二章进行了系统的学习,在这两章的知识奠基下,可以简单的构造一个GUI用户界面,在两周的学习后,可以 ...

  7. 学习笔记:CentOS7学习之十五: RAID磁盘阵列的原理与搭建

    目录 学习笔记:CentOS7学习之十五: RAID磁盘阵列的原理与搭建 14.1 RAID概念 14.1.1 RAID几种常见的类型 14.1.2 RAID-0工作原理 14.1.3 RAID-1工 ...

  8. js学习进阶-元素获取及样式设置

    var imgs = document.querySelectorAll("article img"); 获得article元素的直接或间接子孙的所有img元素, <arti ...

  9. HTML+CSS样式设置——CSS一学就会

    HTML+CSS样式设置 CSS:(Cascading Style Sheets)层叠样式设置表. 网页的展示效果跟其排版有非常大的关系.排版则主要依靠CSS来设置.调节. 以下说CSS与HTML的联 ...

随机推荐

  1. python读取文件首行和最后一行

    python读取文件最后一行两种方式 1)常规方法:从前往后依次读取 步骤:open打开文件. 读取文件,把文件所有行读入内存. 遍历所有行,提取指定行的数据. 优点:简单,方便 缺点:当文件大了以后 ...

  2. POJ 2591

    #include<iostream> #include<stdio.h> #define MAXN 10000001 using namespace std; int a[MA ...

  3. VirtualBox下Ubuntu虚拟机共享文件夹、自动挂载相关配置

    VirtualBox Ubuntu 共享文件夹的自动挂载: 一些基本的操作步骤: 首先,我们想要实现VirtualBox虚拟机与windows系统之间的通信,我们必须也应该正确的安装虚拟机系统. 其次 ...

  4. Oracle EXPDP/IMPDP示例

    待整理: 参考DAVE博客 http://blog.csdn.net/tianlesoftware/article/details/6260138

  5. 虚幻4引擎角色蓝图Character的Movement组件学习

    Jumping/Falling Air Control :角色在空中时的控制参数.数值为1 代表完全控制. Air Control Boost Multiplier :当角色的速度超过 Velocit ...

  6. Vue笔记:使用 Yarn 管理依赖包

    上年10月份, Facebook 发布了新的 node.js 包管理器 Yarn 用以替代 npm ,它比npm更快.更高效. Yarn VS npm 1.yarn.lock 文件 在 npm 中同样 ...

  7. 对动态加载javascript脚本的研究

    有时我们需要在javascript脚本中创建js文件,那么在javascript脚本中创建的js文件又是如何执行的呢?和我们直接在HTML页面种写一个script标签的效果是一样的吗?(关于页面scr ...

  8. linux 设置与网络同步的时间

    #设置linux时间 与网络时间同步安装命令yum install -y ntp同步网络时间ntpdate ntp1.aliyun.com

  9. SQL PKG示例

    CREATE OR REPLACE PACKAGE PKG_SYS_LOG IS -- Author : Li Cong -- Created : 2009-10-12 -- Purpose : 存放 ...

  10. 【angular5项目积累总结】结合adal4实现http拦截器(token)

    import { Injectable } from '@angular/core'; import { HttpEvent, HttpInterceptor, HttpHandler, HttpRe ...