text-align和vertical-align
1.text-align(水平对齐)
text-align样式使元素在其定界区域内水平对齐,其取值可以是left、right、center或justify。justify使元素两端对齐。
2.vertical-align(垂直对齐)
(1)vertical-align基本属性
baseline:将支持valign特性的对象的内容与基线对齐
sub:垂直对齐文本的下标
super:垂直对齐文本的上标
top:将支持valign特性的对象的内容与对象顶端对齐
text-top:将支持valign特性的对象的文本与对象顶端对齐
middle:将支持valign特性的对象的内容与对象中部对齐
bottom:将支持valign特性的对象的文本与对象底端对齐
text-bottom:将支持valign特性的对象的文本与对象底端对齐
inherit:规定应该从父元素继承 vertical-align 属性的值(任何版本的IE(包括 IE8)都不支持属性值 "inherit")
注:常用的有top、middle、bottom,其他的不是很常用。所有浏览器都支持该属性。
一般用于图片和表格的对齐
(2)vertical-align属性不起作用?
只有一个元素属于inline或是inline-block,其身上的vertical-align属性才会起作用(即span内联元素、img内联块状元素等元素可以起作用,而div为块状元素block则不可以)
对vertical-align想要有更多的了解可参考:
http://www.zhangxinxu.com/wordpress/2010/05/%E6%88%91%E5%AF%B9css-vertical-align%E7%9A%84%E4%B8%80%E4%BA%9B%E7%90%86%E8%A7%A3%E4%B8%8E%E8%AE%A4%E8%AF%86%EF%BC%88%E4%B8%80%EF%BC%89/ 如果想使一个内容水平居中就使用text-align:align,反之如果是垂直居中使用text-align + vertical-align。
text-align和vertical-align的更多相关文章
- What is Vertical Align?
https://css-tricks.com/what-is-vertical-align/ ************************************************* CSS ...
- 浏览器兼容CSS代码:按钮文字垂直居中(input button text vertical align)
经过测试的浏览器:IE6, IE7, IE8, IE9, Firefox, Chrome, Safiri, Maxthon 按钮的HTML代码: <input id="btn_comm ...
- 关于Vertical Align的理解
1:vertical-align 翻译就是垂直-对齐... 2:关于line-height的点 2.1:如果一个标签没有定义height属性,那么其最终表现的高度一定是由line-height起作用. ...
- 前端知识点回顾之重点篇——CSS中vertical align属性
来源:https://www.cnblogs.com/shuiyi/p/5597187.html 行框的概念 红色(line-height)为行框的顶部和底部,绿色(font-size)为字体的高度, ...
- __attribute__ ((section(".text")))的测试
一.测试原因 在学习u-boot的环境变量过程中,看到有如此的代码,现对涉及到的内容进行实验测试. 二.测试目的 1.了解gcc允许对段的属性进行更改的方法. 2.解决”ENV_IS_EMBEDDED ...
- Getting Text Metrics in Firemonkey(delphiscience的博客)
Firemonkey’s abstract TCanvas class has been providing the dimensions of the bounding rectangle of s ...
- 关于$f(x)=\int_0^x\left|\sin\frac1t\right|\text dt$求导的问题
首先,我们考虑\(f(x)\)在\(\mathbb R\)上都是定义的.根据定义,显然有\(f(0)=0\):其次,对于\(x\neq0\),不妨先设\(x\gt0\),则有在\(t\rightarr ...
- Scene Text Detection(场景文本检测)论文思路总结
任意角度的场景文本检测论文思路总结共同点:重新添加分支的创新更突出场景文本检测基于分割的检测方法 spcnet(mask_rcnn+tcm+rescore) psenet(渐进扩展) mask tex ...
- CSS3与页面布局学习总结(二)——Box Model、边距折叠、内联与块标签、CSSReset
一.盒子模型(Box Model) 盒子模型也有人称为框模型,HTML中的多数元素都会在浏览器中生成一个矩形的区域,每个区域包含四个组成部分,从外向内依次是:外边距(Margin).边框(Border ...
- highcharts
preparation Highcharts Highcharts是一个制作图表的纯Javascript类库,主要特性如下: 兼容性:兼容当今所有的浏览器,包括iPhone.IE和火狐等等: 对个人用 ...
随机推荐
- 网鼎杯-Fakebook-反序列化和SSRF和file协议读取文件
0x00知识点:SSRF SSRF (Server-side Request Forge, 服务端请求伪造) 是一种由攻击者构造形成由服务端发起请求的一个安全漏洞.一般情况下,SSRF攻击的目标是从外 ...
- [Algo] 132. Deep Copy Undirected Graph
Make a deep copy of an undirected graph, there could be cycles in the original graph. Assumptions Th ...
- XssFilter EscapeUtil
package com.ruoyi.framework.config; import java.util.HashMap; import java.util.Map; import javax.ser ...
- py02_03:py的数据类型
数据类型初识 1. 整数(int) 在32位机器上,整数的位数为32位,取值范围为-2**31-2**31-1,即-2147483648-2147483647 在64位系统上,整数的位数为64位,取值 ...
- Python列出文件夹中的文件
几乎所有的关于操作系统的内容可以在python 官方文档中找到:https://docs.python.org/3/library/os.html#module-os 其中os.path被单独列出:h ...
- Java--Runtime.addShutdownHook
转自:http://kim-miao.iteye.com/blog/1662550 一.Runtime.addShutdownHook理解 在看别人的代码时,发现其中有这个方法,便顺便梳理一下. vo ...
- python字典常用方法
字典(Dictionary) 字典是一个无序.可变和有索引的集合.在 Python 中,字典用花括号编写,拥有键和值. 实例 创建并打印字典: thisdict = { "brand&quo ...
- python中的变量对象小结2
# .变量名和数据内容是分开存储的. # .数据保存在内存中的一个位置(地址). # .变量中保存着数据在内存中的地址. # 引用就是变量中记录数据的地址. #不可变变量,重新赋值时会重新开辟一个地址 ...
- [前端] VUE基础 (5) (过滤器、生命周期、钩子函数)
一.过滤器 过滤器分为局部过滤器和全局过滤器. 1.局部过滤器 <body> <div id="app"> </div> <script ...
- goweb- session和数据存储
session和数据存储 Web开发中一个很重要的议题就是如何做好用户的整个浏览过程的控制,因为HTTP协议是无状态的,所以用户的每一次请求都是无状态的,我们不知道在整个Web操作过程中哪些连接与该用 ...