css笔记 - 张鑫旭css课程笔记之 vertical-align 篇

支持负值的属性:

margin
letter-spacing
word-spacing
vertical-align

元素vertical-align垂直对齐的位置与前后元素都没有关系 元素vertical-align垂直对齐的位置与行高line-height没有关系。 vertical-align垂直对齐的位置只与font-size大小有关。

一、vertical-align支持的属性值及组成:

1.支持继承:

inherit 继承

2.其他四类属性值: a. 线类:

baseline(vertical-align默认属性值)
top
middle
bottom

b. 文本类

text-top
text-bottom

c. 上标下标类

sub
super

d. 数值百分比类

20px
2em(1em相当于一个元素的font-size值)
20%
...

d-1: 数值类 d-2: 百分比类

数值类和百分比类的共同特点:

1. 都带数字 2. 都支持负值   其他支持负值的属性有:margin、letter-spacing、word-spacing、vertical-align 3. 行为表现一致   具体行为如下:     设置为数值时(20px\20em),元素基于vertical-align:baseline;对齐基础的位置上下偏移对应数值大小。正值向上偏移,负值向下偏移。比如vertical-align:1px;就是在baseline的基础上,向上移动1像素。

    但是,设置为百分比值时,元素的vertical-align最终计算值是相对于行高line-height计算的。比如,一个父元素的line-height:0;那么子元素设置vertical-align:100%;那么最终就是0*100%

缺点:兼容性问题 - ie6/7下,vertical-align百分比值不支持小数line-height。

二、vertical-align起作用的前提(display值对垂直对齐的影响)

有时候设置vertical-align会发现根本不起作用, 第一个原因:是因为vertical-align只能应用于inline/inline-block水平以及table-cell元素 1. inline(或匿名inline)水平元素 img、span、strong、em、自定义元素(浏览器默认会当做inline水平) 2. inline-block input(ie8+)、button(ie8+)(这俩元素在ie67中会被认为是inline水平) 3. table-cell td

第二个原因:是因为行高/父元素高度根本不够

总结: 默认情况下,支持vertical-align的为图片、按钮、文字、单元格。 display设置时:更改元素的显示水平也会让其支持vertical-align

三、更改元素的显示水平

1. display属性设置:非inline、inline-block、table-cell等 2. css声明 float会让元素变成block水平 position:absolute会让元素变成block水平,且脱离文档流

四、vertical-align和line-height的关系

1. vertical-align的百分比值是相对于line-height的值计算的。 2. 普通情况下,图片和父元素底部有间隙 3. 对于内联元素,vertical-align和line-height虽然看不见,但实际上到处都是

空的inline-block、没有任何文字和图片的元素,或者本身有不为visible的overflow属性,其基线是margin的底边缘。

五、vertical-align线类属性值

baseline:基线,默认值 top:顶线 inline等元素设置vertical-aligntop并不能把元素提高。毕竟vertical-align不能改变元素的高度。 元素顶部和整行的顶部对齐 middle:中线 inline/inline-block元素,元素的垂直中心点和父元素基线(基线是x底部)上1/2 x-height处对齐。 table-cell元素,单元格填充盒子相对于外边的表格行居中对齐

字符有下沉特性 bottom: 底线 inline/inline-block元素,元素底部和整行的底部对齐 table-cell元素,单元格底padding边缘和表格行的底部对齐

六、vertical-align文本类属性值

text-top: 盒子的顶部和父级content area的顶部对齐 text-bottom: 盒子的底部和父级content area的底部对齐

 content-area相当于文字所在区域

vertical-align效果应用

1. 单个图片和多行文本垂直居中 css

    .box {
      padding: 10px;
      border: 1px solid #eee;
      margin: 5px 0;
      /* 核心 */
      width: 245px;
      text-align: justify;
    }

    .box span {
      width: 200px;
      /* 核心 */
      display: inline-block;
      vertical-align: middle;
    }

    .box img {
      /* 核心 */
      vertical-align: middle;
    }

元素vertical-align垂直对齐的位置与前后元素都没有关系 元素vertical-align垂直对齐的位置与行高line-height没有关系。 vertical-align垂直对齐的位置只与font-size大小有关。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏有趣的django

18.CSS

选择器 1.标签上直接设置style属性 <p style="color: red">直接标签里面写</p> 2.id选择器 <style> ...

34670
来自专栏九彩拼盘的叨叨叨

元素的水平居中的方法

上面介绍的方法都是浏览器兼容性比较好的。兼容IE8+,Chrome,Firefox等。

7520
来自专栏用户画像

导航页下拉菜单

1、static :默认值 没有定位 元素出现在正常的流中(忽略top,bottom,left,right或者z-index声明)。

13020
来自专栏菜鸟计划

CSS基础语法(二) CSS的9种选择器

样式表的选择器 1.类选择器 根据HTML标签的class属性选择样式应用的属性  .类值{ … } 2.ID选择器 根据HTML标签的ID属性选择样式应用的元...

36030
来自专栏Android小菜鸡

HTML JS DOM

  当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model)。HTML DOM 模型被构造为对象的树。

21220
来自专栏从零开始学 Web 前端

从零开始学 Web 之 jQuery(二)获取和操作元素的属性

DOM中有很多方式获取元素,比如通过id,通过标签名,通过类名,通过name的值,通过选择器等方式。

14340
来自专栏Android干货

自定义控件详解(五):onMeasure()、onLayout()

16320
来自专栏Android干货

自定义控件详解(七):drawText()

20730
来自专栏进击的君君的前端之路

CSS3文本

10820
来自专栏Android先生

Android开发人员初识前端

<em> 表示强调,<strong> 表示更强烈的强调。并且在浏览器中<em> 默认用斜体表示,<strong> 用粗体表示。两个标签相比,目前国内前端程序员更...

13730

扫码关注云+社区

领取腾讯云代金券