CSS vertical-align属性

之前也经常用到vertical-align进行垂直居中对齐,突然发现其中的一些属性值根本就没使用过,也不清楚效果,将今天的研究成果记录下。

vertical-align 属性

下表是w3c上列举的属性:

目前所有的浏览器都能完全支持vertical-align,兼容性在线查询网址:http://caniuse.com/。需要注意的是只有一个元素属于inline或是inline-block(table-cell也可以理解为inline-block水平)水平,其身上的vertical-align属性才会起作用。

最常用到的4个属性baseline、middle、top、bottom之间的位置关系如下图所示:

vertical-align 实例

HTML代码:

<div class="content">
<span class="box">
<span class="ddd"></span>
hello world。
</span>
</div>

默认属性:baseline

.box{background:black; color:white; padding-left:20px;}
.ddd{display:inline-block; width:4px; height:4px; background:white;}

效果如下:

属性:bottom

.box{background:black; color:white; padding-left:20px;}
.ddd{display:inline-block; width:4px; height:4px; background:white; vertical-align:bottom;}

效果如下:

属性:middle

    .box{background:black; color:white; padding-left:20px;}
.ddd{display:inline-block; width:4px; height:4px; background:white; vertical-align:middle;}

效果如下:

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

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

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

  2. What is Vertical Align?

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

  3. 0010 CSS字体样式属性:font-size、font-family、Unicode字体、font-weight、font-style、综合设置、color、 text-align、line-height、text-indent、text-decoration、、、

    CSS字体样式属性.调试工具 目标 应用 使用css字体样式完成对字体的设置 使用css外观属性给页面元素添加样式 使用常用的emment语法 能够使用开发人员工具代码调试 1.font字体 1.1 ...

  4. CSS之cursor属性

    CSS之cursor属性 今天学习了CSS的cursor属性,第一篇博客就用来总结它吧. cursor属性用于控制光标的显示样式,可取的值有这些: cursor:url()*|{auto|defaul ...

  5. CSS样式常用属性整理

    web工程师是最近5年刚刚兴起的一门高薪职业,人们的专注度越来越高. 那么前端除了学习html标签之外还需要掌握什么知识点呢? 为大家整理了一个和HTML标签密不可分的知识要点--<CSS样式常 ...

  6. CSS中box-sizing属性的理解与部分用法

    今天看了一些关于box-sizing的一些资料,在这里整理一下,希望也能对大家有所帮助. box-sizing是CSS的一个属性,很好的解决了盒模型的相关问题.CSS中的盒模型(Box model)分 ...

  7. 深入理解css中position属性及z-index属性

    深入理解css中position属性及z-index属性 在网页设计中,position属性的使用是非常重要的.有时如果不能认识清楚这个属性,将会给我们带来很多意想不到的困难. position属性共 ...

  8. CSS Counters 计数属性

    CSS Counters其实就是一计数器,早期在CSS中计数器仅存在于ul和ol元素.如果要使用在div这样的元素上,只能通过list-style-image或者是元素的backgroud-image ...

  9. 利用CSS的@font-face属性 在网页中嵌入字体

    字体使用是网页设计中不可或缺的一部分.网页是文字的载体,我们希望在网页中使用某一特定字体,但是该字体并非主流操作系统的内置字体,这样用户在浏览页面的时候就有可能看不到真实的设计. 美工设计师最常做的办 ...

  10. CSS中Position属性

    也许你看到这个标题觉得很简单,确实这是一篇关于CSS中Position属性基础知识的文章,但是关于Position的一些细节也许你不了解. 1.简介 position有五个属性: static | r ...

随机推荐

  1. WPF 动态生成DataGrid及动态绑定解决方案

    一.场景 有过WPF项目经验的朋友可能都知道,如果一个DataGrid要绑定静态的数据是非常的简单的(所谓静态是指绑定的数据源的类型是静态的),如下图所示,想要显示产品数据,只需绑定到一个产品列表即可 ...

  2. STM32F103RC进入串口3接收中断产生HardFault_Hander问题解决!

    最近在以前的项目上添加串口3通讯后,程序一进入接收中断后就产生HardFault_Hander.串口3发送数据一切正常,当打开串口3接收功能时,程序就处于HardFault_Hander状态,而导致死 ...

  3. 20155304 2016-2017-2 《Java程序设计》第四周学习总结

    20155304 2016-2017-2 <Java程序设计>第四周学习总结 教材学习内容总结 第六章 继承: 概念: 面向对象中,为避免多个类间重复定义共同行为.(简单说就是将相同的程序 ...

  4. Azure Messaging-ServiceBus Messaging消息队列技术系列6-消息回执

    上篇博文中我们介绍了Azure Messaging的重复消息机制.At most once 和At least once. Azure Messaging-ServiceBus Messaging消息 ...

  5. eclipse扩容

    -vmD:/jdk-6u17-windows-i586/jdk1.6.0_17/bin/javaw.exe-startupplugins/org.eclipse.equinox.launcher_1. ...

  6. iOS开发之使程序在后台运行

    方法一(此方法不太可靠): 开启程序后台运行: [application beginBackgroundTaskWithExpirationHandler:^{ //后台运行过期后会调用此block内 ...

  7. windos环境apache+mysql+php+Discuz的安装配置

    首先是相关软件的下载:PHP.Apache和Mysql软件以及VC库.相关软件可到我的百度网盘下载,百度网盘:http://pan.baidu.com/s/1o6DYcMu 相关软件的直接下载地址: ...

  8. [Android]使用RecyclerView替代ListView(四:SeizeRecyclerView)

    以下内容为原创,欢迎转载,转载请注明 来自天天博客:<> [Android]使用RecyclerView替代ListView(四:SeizeRecyclerView) 在RecyclerV ...

  9. Linux简介与厂商版本下

    2. Linux的厂商版本 在Linux内核基础上,我们还有许多厂商版本.即使有了内核和GNU软件,Linux的安装和编译并不是简单的工作,Linux厂商就是瞄准了这个市场.这些厂商会在Linux内核 ...

  10. ksum问题

    2sum: Given an array of integers, return indices of the two numbers such that they add up to a speci ...