在前端开发中我们经常需要将元素垂直居中对齐,我们很自然的想到使用vertical-align属性,但是使用后却发现有时候能起作用,有时候却又不起作用。究其原因还是因为我们没有将vertical-align属性弄清楚,今天就来分析一下这个属性,若分析有误,还请原谅,望一起探讨!

规范介绍

Value:         baseline | sub | super | top | text-top | middle | bottom | text-bottom | <percentage> | <length> | inherit
Initial: baseline
Applies to: inline-level and 'table-cell' elements
Inherited: no
Percentages: refer to the 'line-height' of the element itself
Media: visual
Computed value:for <percentage> and <length> the absolute length, otherwise as specified
适用元素

该属性仅适用于inline,inline-block,table-cell元素

属性值介绍

介绍属性之前先来了解一下各个属性值代表着什么,通过下面这张图可以知道



我们知道英语本子每行有4条线,其中红色的线即为基线

所用demo

<div class="box">
<span class="aa"></span>
x
</div>

baseline

将元素的基线与父元素的基线对齐

.aa4{
display:inline-block;
width:5px;
height:5px;
background:blue;
vertical-align: baseline;
}
x

baseline的确定规则

  1. inline-table元素的baseline是它的table第一行的baseline。
  2. 父元素【line box】的baseline是最后一个inline box 的baseline。
  3. inline-block元素,如果内部有line box,则inline-block元素的baseline就是最后一个作为内容存在的元素[inline box]的baseline,而这个元素的baseline的确定就要根据它自身来定了。
  4. inline-block元素,如果其内部没有line box或它的overflow属性不是visible,那么baseline将是这个inline-block元素的底margin边界。

length

基于基线上(正值)下(负值)移动元素

input[name="sex"]{
margin:0;
padding:0;
vertical-align:-2px;
}

基于基线向下移动-2px

女性男性

percentage

基于基线上(正值)下(负值)移动元素,值通过百分比乘上line-height而得

.aa2{
display:inline-block;
width:5px;
height:5px;
background:blue;
vertical-align: -10%;
line-height: 30px;
}
x

这里的vertical-align:-10%所代表的实际值是:-10% * 30 = -3px,即向基线下方移动3px

注意:若该元素没有定义line-height,则会使用继承的line-height

middle

将元素的中线与父元素的基线加上字母x的高度的一半对齐

.aa3{
display:inline-block;
width:5px;
height:5px;
background:blue;
vertical-align: middle;
}
x

text-top

将元素的顶部与父元素正文区域的顶部对齐,元素的位置受父元素font-size的大小影响

.aa5{
display:inline-block;
width:5px;
height:5px;
background:blue;
vertical-align: text-top;
}
x

text-bottom

将元素的底部与父元素的正文区域的底部对齐,元素的位置受父元素font-size的大小影响

.aa6{
display:inline-block;
width:5px;
height:5px;
background:blue;
vertical-align: text-bottom;
}
x

top

将元素的顶部与line box顶部对齐

.aa7{
display:inline-block;
width:5px;
height:5px;
background:blue;
vertical-align: top;
}
x

bottom

将元素的底部与line box底部对齐

.aa8{
display:inline-block;
width:5px;
height:5px;
background:blue;
vertical-align: bottom;
}
x

super

将元素置于基线上方合适的位置

.aa10{
display:inline-block;
width:5px;
height:5px;
background:blue;
vertical-align: super;
}
102

sub

将元素置于基线下方合适的位置

.aa9{
display:inline-block;
width:5px;
height:5px;
background:blue;
vertical-align: sub;
}
x

参考文章

vertical-align属性探究的更多相关文章

  1. 前端知识点回顾之重点篇——CSS中vertical align属性

    来源:https://www.cnblogs.com/shuiyi/p/5597187.html 行框的概念 红色(line-height)为行框的顶部和底部,绿色(font-size)为字体的高度, ...

  2. HTML 标签元素的 align 属性

    align 属性规定段落中文本的对齐方式. 有 left  right center  justify 这些参数 left  right center  就是左对齐 右对齐 中间对齐 justify  ...

  3. What is Vertical Align?

    https://css-tricks.com/what-is-vertical-align/ ************************************************* CSS ...

  4. Android中软键盘展示、EditText焦点获取及windowSoftInputMode属性探究

    2017-08-14 21:44:23 有很多中情况,分别展示. 1.Activity不做任何设置,布局使用LinearLayout 会自动滚动EditText之上的所有View,代码: <?x ...

  5. 格而知之2:UIView的autoresizingMask属性探究

    UIView的autoresizingMask属性,是用在当一个UIView实例的父控件的尺寸发生变化时,来自动调整UIView实例在父控件中的位置与尺寸的.autoresizingMask属性是一个 ...

  6. 关于Vertical Align的理解

    1:vertical-align 翻译就是垂直-对齐... 2:关于line-height的点 2.1:如果一个标签没有定义height属性,那么其最终表现的高度一定是由line-height起作用. ...

  7. 浏览器兼容CSS代码:按钮文字垂直居中(input button text vertical align)

    经过测试的浏览器:IE6, IE7, IE8, IE9, Firefox, Chrome, Safiri, Maxthon 按钮的HTML代码: <input id="btn_comm ...

  8. img 的 align 属性

    AbsBottom 图像的下边缘与同一行中最大元素的下边缘对齐. AbsMiddle 图像的中间与同一行中最大元素的中间对齐. Baseline 图像的下边缘与第一行文本的下边缘对齐. Bottom ...

  9. HTML自定义对象与属性探究(谷歌,火狐,IE9浏览器没问题)

    1.自定义标签 <zqz>asdas</zqz> <style> zqz{ color:red; } </style> 页面变色 2.自定义标签的hov ...

随机推荐

  1. SpringBoot2.0源码分析(三):整合RabbitMQ分析

    SpringBoot具体整合rabbitMQ可参考:SpringBoot2.0应用(三):SpringBoot2.0整合RabbitMQ RabbitMQ自动注入 当项目中存在org.springfr ...

  2. web进修之—Hibernate HQL(7)

    概述 HQL是Hibernate封装成为面向对象的数据库查询语言,具有如下特点: 面向对象,包括继承.多态和关联之类的概念,SQL操作的数据库的表,HQL更像是操作对象 大小写敏感,只对对象和属性敏感 ...

  3. SLAM入门之视觉里程计(3):两视图对极约束 基础矩阵

    在上篇相机模型中介绍了图像的成像过程,场景中的三维点通过"小孔"映射到二维的图像平面,可以使用下面公式描述: \[ x = MX \]其中,\(c\)是图像中的像点,\(M\)是一 ...

  4. CNN 模型压缩与加速算法综述

    本文由云+社区发表 导语:卷积神经网络日益增长的深度和尺寸为深度学习在移动端的部署带来了巨大的挑战,CNN模型压缩与加速成为了学术界和工业界都重点关注的研究领域之一. 前言 自从AlexNet一举夺得 ...

  5. thinkphp自动创建数据对象分析

    thinkphp有一个自动创建数据对象的create方法,核心代码如下 public function create($data='',$type='') { // 如果没有传值默认取POST数据 i ...

  6. MyBatis源码解析(二)——Environment环境

    原创作品,可以转载,但是请标注出处地址:http://www.cnblogs.com/V1haoge/p/6625612.html 本应该先开始说Configuration配置类的,但是这个类有点过于 ...

  7. c++中的new、operator new、placement new

    一.定义 1.new new是c++中的关键字,,其行为总是一致的.它先调用operator new分配内存,然后调用构造函数初始化那段内存. new 操作符的执行过程:1. 调用operator n ...

  8. TensorFlow(3)CNN中的函数

    tf.nn.conv2d()函数 参数介绍: tf.nn.conv2d(input, filter, strides, padding, use_cudnn_on_gpu=None, name=Non ...

  9. [转]如何在Angular4中引入jquery

    本文转自:https://blog.csdn.net/home_zhang/article/details/77992734 1.anjq是我的项目名称: 在anjq目录下打开dos命令窗口,然后依次 ...

  10. C# 实现Jwtbearer Authentication

    Jwtbearer Authentication 什么是JWT JWT(JSON Web Token), 顾名思义就是在Web上以JSON格式传输的Token(RFC 7519). 该Token被设计 ...