CSS快速学习6：vertical-align讲解

Vertical-align属性设置元素的垂直对齐方式。

说明

该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。这会使元素降低而不是升高。在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式。

值	描述
长度	通过距离升高（正值）或降低（负值）元素。'0cm'等同于'baseline'
百分值 – %	通过距离（相对于1line-height1值的百分大小）升高（正值）或降低（负值）元素。'0%'等同于'baseline'
baseline	默认。元素的基线与父元素的基线对齐。
sub	降低元素的基线到父元素合适的下标位置。
super	升高元素的基线到父元素合适的上标位置。
top	把对齐的子元素的顶端与line box顶端对齐。
text-top	把元素的顶端与父元素内容区域的顶端对齐。
middle	元素的中垂点与父元素的基线加1/2父元素中字母x的高度对齐。
bottom	把对齐的子元素的底端与line box底端对齐。
text-bottom	把元素的底端与父元素内容区域的底端对齐。
inherit	采用父元素相关属性的相同的指定值。

代码示例：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
.box1 {width:500px; height:500px; border:3px #000 solid; margin:0 auto; text-align:center;}
.box1 img {vertical-align:middle;}
.box1 span {width:0px; height:100%; display:inline-block; vertical-align:middle;}

.box2 {width:500px; height:500px; border:3px #000 solid; margin:0 auto; text-align:center; line-height:500px; font-size:0px;}
.box2 img {vertical-align:middle;}
</style>
</head>

</body>
</html>

说明：第一种方式，设置一个空的<span></span>作为参照，使<span>的高度为100%,那么图片设置vertical-align时，就会标齐<span>中间位置，达到图片居中效果。

第二种方式，不常用，用文档限制，只在html5中有效果。设置line-height为容器高度，字体大小为0，免去字体本身大小对内部空间的影响，达到绝对居中。

CSS快速学习6：vertical-align讲解相关推荐

CSS快速学习（2021.2.7-15）
注意: 这波是赶作业,所以看的速成视频.(从win32到electron到html和css,假期过大半东西还没做出来555) 仍旧是众所周知的学习网站:b站,找到了DasAutoooo老师的视频. 学 ...
CSS快速学习：几种导航条案例
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
CSS快速学习9：浏览器兼容
五大浏览器内核 •Trident (MSHTML) (三叉戟:三叉线:三齿鱼叉) •Gecko (壁虎) •Presto ( 迅速的) •Webkit (Safa ...
CSS快速学习8：圆角切图、滚动条和图片整合技术
圆角切图 1.css 书写 border-radius:左上角右上角右下角左下角 border-radius:左上角右下角右上角左下角(对角线) border-top- ...
CSS快速学习5：文本溢出和XHTML元素分类
文本溢出 1.溢出属性(容器的) overflow:visible/hidden(隐藏)/sroll/auto(自动)/inherit; visible:默认值,内容不会被修剪,会出现在元素框之外: ...
CSS快速学习4：浮动和盒模型
浮动属性: Float:定义网页中其他文本如何环绕该元素. 有三个属性值: left:元素活动浮动在文本左面: right:元素浮动在右面: none:默认值,不浮动. 浮动的三大显著特征: 1.di ...
CSS快速学习2：选择符权重和字体类属性
选择符的权重: CSS中用四位数字表示权重. 类型选择符的权重为0001 class选择符的权重为0010 id选择符的权重为0100 子选择符的权重为0000 属性选择符的权重为0010 伪类选择符 ...
CSS快速学习10：高度自适应
高度自适应网页布局中经常要定义元素的宽和高.但很多时候我们希望元素的大小能够根据窗口或子元素自动调整,这就是自适应. 元素自适应在网页布局中非常重要,它能够使网页显示更灵活,可以适应在不同设备.不同 ...
CSS快速学习7：定位锚点
定位锚点: 一.position 定位属性,检索对象的定位方式: 语法:position:static /absolute/relative/fixed 取值: 1.static:默认值,无特殊定位, ...

CSS快速学习6：vertical-align讲解

CSS快速学习6：vertical-align讲解相关推荐

最新文章

热门文章