首页 » CSS » CSS深入理解之vertical-align

CSS深入理解之vertical-align

原文 http://blog.csdn.net/muzi187/article/details/79160083

2018-01-25 17:39:07阅读(324)

慕课学习-->前端开发-->HTML/CSS-->CSS深入理解之vertical-align

Vertical-align 一、vertical-align基本认识

vertical-align支持的属性值及组成:除了inherit(继承)外,还包括4类:

1、线类:baseline(默认值,基线对齐),top,middle,bottom

2、文本类:text-top,text-bottom

3、上标下标类:sub,super

4、数值百分比类:20px,2em,20%,......(支持负值)

值为数值的行为表现机制:在baseline对齐的基础上上下偏移对应数值大小。

值为百分比时,是相对于line-height计算的!(IE6/IE7下vertical-align百分比值不支持小数line-height)

支持负值的属性:margin,letter-spacing,word-spacing,vertical-align

二、vertical-align起作用的前提

各种display值对vertical-align的影响

1、Vertical-align起作用是有前提条件的,vertical-align应用于inline水平以及‘table-cell’元素。

Inline水平:

Inline:<img>,<span>,<strong>,<em>,未知元素,......

Inline-block:<input>(IE8+),<button>(IE8+),......

Table-cell元素:<td>

默认状态下:图片、按钮、文字和单元格

2、但是,元素的显示水平是可以更改的

(1)display更改元素的显示水平

(2)CSS声明更改元素的显示水平:浮动使元素变成block水平,绝对定位使元素变成block水平。

3、table-cell居中,vertical-align只能作用于自身(设置table-cell的元素),为他的子元素设置vertical-align不起作用。

4、文字长度不同和图片的垂直居中效果

 CSS深入理解之vertical-align

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title></title>
<style>
.test-list {
	width: 300px;
    margin: -1px auto 0;
    padding: 10px;
    border: 1px solid #ccc;
    font-size: 14px;
	display:block
}
.test-list>span{display:inline-block;width:210px;vertical-align:middle;}
.test-list>img{vertical-align:middle;}
</style>
</head>
<body>
<div class="test-list">
	<span>文字</span>
	<img src="1.png" width="78">
</div>
<div class="test-list">
	<span>文字<br/>文字</span>  
	<img src="1.png" width="78">
</div>
<div class="test-list">
	<span>文字<br/>文字<br/>文字</span> 
	<img src="1.png" width="78">
</div>
<div class="test-list">
	<span>文字<br/>文字<br/>文字<br/>文字</span> 
	<img src="1.png" width="78">
</div>
</body>
</html>

三、vertical-align与line-height之间的关系

1、Vertical-align与line-height(垂直对齐与行高)

Vertical-align百分比是相对于line-height值计算的

(1)例子

CSS深入理解之vertical-align

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title></title>
<style>
.box {
    text-align:center;
	background-color: #e0e0e0;
	width:600px;
	font-size: 24px;    
	line-height: 1.5;
}
img{width:300px;vertical-align: baseline;}
.showline {
    display: inline-block;
    width: 0;
    outline: 1px dashed red;
}
</style>
</head>
<body>
<p id="box" class="box">
	<img src="1.png"><span class="showline fade in" data-display="inline-block"> </span>
</p>
</body>
</html>

对于内联元素,vertical-align与line-height虽然看不见,但实际上 到处都是 。也就是说,只要元素是内联元素,就一定会受vertical-align和line-height影响。

图片使用和继承的CSS声明为:vertical-align: baseline;font-size: 24px;line-height: 1.5;此时的实际行高是36px,也就是红色虚线的高度是36px。内联元素默认基线对齐,图片后面的虚线属于字符,即图片与文字下边缘对齐,所以图片下面就出现了空白。

图片下面的空白是vertical-align与line-height共同造成的。

对症下药:A、消灭vertical-align:display:block;margin:auto;行高起作用的前提是内联元素

<style>
.box {
    text-align:center;
	background-color: #e0e0e0;
	width:600px;
	font-size: 24px;    
	line-height: 1.5;
}
img{width:300px;vertical-align: baseline;display: block; margin: auto;}
</style>
<p id="box" class="box">
	<img src="1.png">
</p>

B、改变图片的vertical-align:bottom/middle/top不用基线对齐,使用线性对齐。

C、改变line-height:line-height: 0;或者font-size:0;

(2)基本现象衍生:(近似)垂直居中

CSS深入理解之vertical-align

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title></title>
<style>
.box {
    text-align:center;
	background-color: #e0e0e0;
	width:600px;
	font-size: 24px;    
	line-height: 210px;
}
img{width:300px;vertical-align: middle;}
.showline {
    display: inline-block;
    width: 0;
    outline: 1px dashed red;
}
</style>
</head>
<body>
<p id="box" class="box">
	<img src="1.png"><span class="showline fade in" data-display="inline-block"> </span>
</p>
</body>
</html>

图片设置垂直居中vertical-align:middle,父元素设置行高line-height大于图片高度。兼容性好:谷歌、火狐、IE7+等。IE7使用的时候,<p><img src="1.png"></p>是不行的,应写为:<p><img src="1.png"><!--这里要折行或空格--></p>

2、CSS2的可视化格式模型文档

‘inline-block’的基线是正常流中最后一个line box的基线,除非,这个line box里面既没有line boxes或者本身‘overflow’属性的计算值不是‘visible’,这种情况下基线是margin底边缘。

四、vertical-align线类属性值深入理解

深入理解vertical-align底线bottom、顶线top、中线middle的行为表现

1、vertical-align:bottom

定义:(1)inline/inline-block元素:元素底部和整行的底部对齐。

(2)table-cell元素:单元格底部padding边缘和表格行的底部对齐。

2、vertical-align:top

定义:(1)inline/inline-block元素:元素顶部和整行的顶部对齐。

(2)table-cell元素:单元格顶部padding边缘和表格行的顶部对齐。

3、vertical-align:middle

定义:(1)inline/inline-block元素:元素的垂直中心点和父元素基线上1/2x-height处对齐。

(2)table-cell元素:单元格填充盒子相对于外面的表格行居中对齐。(td单元格不足高度会用padding填充)

五、vertical-align文本类属性值

Vertical-align:text-top/text-bottom

定义:

1、vertical-align:text-top

盒子的顶部和父级content area的顶部对齐。

2、vertical-align:text-bottom

盒子的底部和父级content area的底部对齐。

Vertical-align对齐与父级相关,所以:

元素vertical-align垂直对齐的位置与前后的元素都没有关系;

元素vertical-align垂直对齐的位置与行高line-height没有关系,只与字体大小font-size有关;

实际作用:兼容性好(IE6/IE7)。一般用在表情图片(或原始尺寸背景图标)与文字的对齐效果。

3、举例:

(1)使用基线的问题在于图标偏上;

CSS深入理解之vertical-align

(2)使用顶线/底线的问题在于受其他内联元素影响,造成巨大定位偏差;

CSS深入理解之vertical-align

(3)使用中线也是不错的选择,但需要恰好的字体大小以及兼容性要求不高;如图图标24px,文字大小16px,图标偏下。IE6/IE7下与其他浏览器下有差异。

CSS深入理解之vertical-align

(4)使用文本底部较合适,不受行高以及其他内联元素影响;

 CSS深入理解之vertical-align

六、Vertical-align上标下标类sub/super

1、HTML中的上标和下标

(1)HTML中的上标:<sup>

(2)HTML中的下标:<sub>

 CSS深入理解之vertical-align

上下标文字大小是正常文字的75%。

<sup> -> vertical-align:super

<sub> -> vertical-align:sub

2、定义:

Vertical-align:super提高盒子的基线到父级合适的上标基线位置。

Vertical-align:sub降低盒子的基线到父级合适的下标基线位置。

七、相邻前后元素的vertical-align值不同,该如何表现

对立属性

1、相邻元素top/bottom,top/bottom是相对于父级而言的,相互之间无干扰。

2、相邻元素text-top/text-bottom,盒子的顶部(底部)和父级content area的顶部(底部)对齐,与字体行高有关。

元素的表现不会被前后元素的vertical-align影响,只需关注当前元素与父级的关系。

八、vertical-align的实际应用

1、小图标和文字的对齐:使用vertical-align负值

20*20px的图标,后面跟14px的文字,图标vertical-align:-5px,对其效果较好。

2、实现不定尺寸图片或多行文字的垂直居中

实现分三步:

(1)主题元素inline-block化;

(2)0宽度100%高度辅助元素;

(3)Vertical-align:middle

举例:不定尺寸图片的垂直居中

CSS深入理解之vertical-align

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
	p{height:200px;text-align:center;background:#eee;}
	i{display:inline-block;height:100%;vertical-align:middle;}
	img{vertical-align:middle;}
</style>
</head>
<body>
<p><img src="1.png"><i></i></p>
</body>
</html>

举例:多行文字的垂直居中

CSS深入理解之vertical-align

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
	p{height:200px;text-align:center;background:#eee;}
	i{display:inline-block;height:100%;vertical-align:middle;}
	span{display:inline-block;vertical-align:middle;}
</style>
</head>
<body>
<p><span>共一行<br/>共两行<br/>共三行</span><i></i></p>
</body>
</html>

最新发布

CentOS专题

关于本站

5ibc.net旗下博客站精品博文小部分原创、大部分从互联网收集整理。尊重作者版权、传播精品博文,让更多编程爱好者知晓!

小提示

按 Ctrl+D 键,
把本文加入收藏夹