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和火狐等等: 对个人用 ...
随机推荐
- 【Python】关于import QtCore报错的处理方法
刚开始学习使用PyQT,但总碰到一些小挫折 比如 import Pyqt成功 而 from PyQt5 import QtCore, QtGui, QtWidgets却报错,找了半天终于找到资料,原因 ...
- javaweb04 ServletRequest&ServletResponse
WEB浏览器与WEB服务器之间的一问一答的交互过程必须遵循一定的规则,这个歌规则就是 HTTP协议HTTP协议是超文本传输协议,它是TCP/IP协议集中的一个应用层协议,用于定义WEB浏览器与WEB服 ...
- Linux--Shell传递参数
参考:http://www.runoob.com/linux/linux-shell-passing-arguments.html
- 启动zookeeper却没有进程
第一次: 没有jdk,安装好jdk就可以了 第二次: java的环境变量没配好,按照下图的配就行: Java_HOME和jre_HOME都是jdk的目录就行 最后两行不加试试,好像都没多大关系 应该是 ...
- day62-html-标签
前端 blog链接:http://www.cnblogs.com/liwenzhou/p/7988087.html 1.前端都有哪些内容? HTML CSS JavaScript jQuery Boo ...
- My97DatePicker日历插件
My97DatePicker具有强大的日期功能,能限制日期范围,对于编写双日历比较简便. 注意事项: My97DatePicker目录是一个整体,不可以破坏 My97DatePicker.html 是 ...
- Deep-Learning-with-Python] 文本序列中的深度学习
https://blog.csdn.net/LSG_Down/article/details/81327072 将文本数据处理成有用的数据表示 循环神经网络 使用1D卷积处理序列数据 深度学习模型可以 ...
- Java--Runtime.addShutdownHook
转自:http://kim-miao.iteye.com/blog/1662550 一.Runtime.addShutdownHook理解 在看别人的代码时,发现其中有这个方法,便顺便梳理一下. vo ...
- DispatcherServlet和ContextLoaderListener,还有spring+servlet3.0 无web.xml启动问题
上篇提到: 关于spring +springmvc中两个spring应用上下文(DispatcherServlet和ContextLoaderListener)的问题,挺让人迷糊的. 他们都是加载Be ...
- 四十一、LAMP与LNMP加速与缓存优化进阶实战下部
一.配置,在nginx和apache所在的服务器中: 1.配置:cd /application/php/lib/php.ini 1)extension_dir="/application/p ...