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和火狐等等: 对个人用 ...
随机推荐
- ubuntu下安装ant
背景介绍 最近终于正式开始填补一下自己在web方面的知识漏洞. 而ant则是必不可少的东西了,要问ant的作用是什么,简单的说,这个软件可以用最简单的方法将你的web应用程序部署到服务器上,是不是很强 ...
- Django模型基础——(二)
上篇博客主要讲了django中对数据库的增删改查,下面深入再讲解下对数据库的操作. 常用的查询方法 下面以表名为User为例 User.object.first() :返回表中第一条数据 User.o ...
- pearson相关系数的介绍
- 201403-1 相反数 Java
法1:排序后,首尾两个指针 法2:每个数的绝对值如果出现过,flag置为1,如果再次出现,就计数+1 本文采用法1 import java.util.Arrays; import java.util. ...
- JQuery查找标签
JQuery查找标签 一.基本标签 1 id选择器: $("#id(名称)") $("#cent") 2 标签选择器: $("tabName(便签名称 ...
- Python笔记_第三篇_面向对象_7.多态
1. 多态的概念 多态:一种事物的多种形态.其表现形式就是连续的继承关系. 还以人喂食动物的例子.最终目标是人可以喂食任何一种动物.如果人要喂食100多种动物,难道要写100中方法吗?多态就是把属性和 ...
- 支付宝H5支付demo
支付宝H5支付 首先我们必须注册一个支付宝应用(本案例就直接用支付宝的沙箱环境,这个沙箱也就是支付宝提供给开发者的一个测试环境) 登录地址:https://open.alipay.com/platfo ...
- Vue2--非父子组件通信笔记
核心要点: var Event=new Vue(); Event.$emit(事件名称, 数据) Event.$on(事件名称,function(data){ //data }.bind(this)) ...
- C++ for循环遍历几种写法
最近写for循环,发现以前用过的方法都忘记了,这里整理下几种方法,欢迎大佬补充: 1. for(itnt n =1;n<5;n++) { } 2. for (auto it = list.beg ...
- [APIO2016]Gap(交互)
第一个subtask应该还是很送分的,就是每次询问两端值的大小,(N+1)/2次即可. 考虑第二个subtask,首先还是先把最小值和最大值询问出来,然后发现不需要询问每一个数,直接将[l+1,r-1 ...