霸道的 vertical-align

vertical-align这个是设置元素的垂直排列的.

用来定义行内元素的基线相对于该元素所在行的基线的垂直对齐.

它的值比较多:baseline | sub | super | top | text-top | middle | bottom | text-bottom | inherit

所有浏览器都支持 vertical-align 属性。

注释:任何的版本的 Internet Explorer (包括 IE8)都不支持属性值 "inherit"。

取值

baseline

将支持valign特性的对象的内容与基线对齐

sub:

垂直对齐文本的下标

super:

垂直对齐文本的上标

top:

将支持valign特性的对象的内容与对象顶端对齐

text-top:

将支持valign特性的对象的文本与对象顶端对齐

middle:

将支持valign特性的对象的内容与对象中部对齐

bottom

将支持valign特性的对象的文本与对象底端对齐

text-bottom:

将支持valign特性的对象的文本与对象底端对齐

<percentage>:

用百分比指定由基线算起的偏移量。可以为负值。基线对于百分数来说就是0%。

<length>:

用长度值指定由基线算起的偏移量。可以为负值。基线对于数值来说为0。(CSS2)

说明

设置或检索对象内容的垂直对其方式。

对应的脚本特性为verticalAlign。

该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。这会使元素降低而不是升高。在表单元格中,这个属性会设置单元格框中的单元格内容的对齐方式。

JavaScript 语法:object.style.verticalAlign="bottom"

http://www.w3school.com.cn/cssref/pr_pos_vertical-align.asp 有详解

时间: 2024-10-08 13:29:29

霸道的 vertical-align的相关文章

line height 与 vertical align

一.line height 其中代表inline box(包含上下间距,若height==line-height,则行间距=line-height - font-size/2),big代表content area. 注: 若line-height < content area ,则line box要取line-height的值,这也是为什么会重叠的原因. line-height属性取值: 1. % 若自身没有设置line-height,则line-height = 父元素的font-size *

”呼叫后台,我要数据,快给我数据“霸道的ajax说

对前端工程师来说,ajax这么个大招一定得点满啊,对开发绝对是超有用的. 能够无刷新的部分更新页面的数据,这么逆天的技能属性可是能实现出很多很酷炫的交互效果的. 然而虽然是很厉害,但其实ajax实现的原理并不会很复杂的,基本上利用ajax实现出一个效果主要都是要经过这两个步骤: 1 通过HTTP请求,获取数据或者提交数据. 2 取得响应数据,对响应数据操作. 对数据的操作一般都是通过dom来完成,这里不再多赘述,我们来看一下ajax是如何请求到数据或着发送数据的吧. function ajax(

Vue.js(12)- 霸道的render函数渲染组件

index.html <div id="app"> <p>这是index.html</p> </div> index.js // 导入全的vue // import Vue from 'vue/dist/vue.js' // 导入阉割版的vue import Vue from 'vue' import App from './app.vue' const vm = new Vue({ el: '#app', template: `<

【分治】快速幂运算-递归与非递归方法

问题 Q: [分治]快速幂运算 时间限制: 1 Sec  内存限制: 128 MB提交: 14  解决: 9[提交][状态][讨论版] 题目描述 邪狼:“老大,好像还是不够油钱啊?”修罗王:“看来只好用我的独门绝技----能力增持术了.”邪狼:“听说能量增持数很霸道的?”修罗王:“没错,假设初始燃油能提供的能量为X,当我对它进行能量增持n秒后,该然后的能量将达到Xn”邪狼:“这么强大的技能啊,简直逆天了,不过怎么之前不见老大用过?”修罗王:“偶尔偷偷用几次没关系,经常用,燃油公司会找我麻烦的.”

3-Highcharts 3D图之3D柱状图分组叠堆3D图

<!DOCTYPE> <html lang='en'> <head> <title>3-Highcharts 3D图之3D柱状图分组叠堆3D图</title> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <script src="../jquery-2.1.4/jquery.min.js&q

8-Highcharts曲线图之对数直线图

<!DOCTYPE> <html lang='en'> <head> <title>8-Highcharts曲线图之对数直线图</title> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <script src="../jquery-2.1.4/jquery.min.js">

关于垂直居中

做项目每次垂直居中的时候都折腾半天,在这边稍微整理一下垂直居中我所理解的一点知识吧. 1,行内元素 行内元素,比如,img,span等直接用vertical-align:middle,就可以搞定了. 2,块元素 垂直居中,最简单的方式是height:20px;line-height:20px;让他们相等,块元素就可以达到居中效果并且不破坏周围的布局. 还可以用绝对定位来布局,height:100px;position:absolute:top:50%:margin-top:-50px;也可以达到

Highcharts 之 【动态数据】

最近项目中需要用到图表,找了几个开源框架,最后选择 Highcharts,原因是 Highcharts 功能强大,稳定,方便,而且开源,社区比较成熟. 首先下载 Highcharts,导入项目. 在 HTML 页面引入相应的 Js 文件.我这个项目是情绪监控相关,所谓情绪也就是热点的意思.大数据团队通过爬虫,先从数据库词典里拿到比较靠前的几个行业名称,然后通过爬虫在网上抓取这几个行业的热度值.每天固定时间抓取,统计一次. <!DOCTYPE HTML> <html> <hea

静态页面制作:6HTML布局(基线的应用)

我们首先来看看现在的理想和现实. 虽然我们现在现实还没有达到理想的效果,但现在至少我们已经明白为什么课后帮和HWHelper为什么不在一行了,为什么呢?那就是因为他们都是块元素.那么有没有什么办法让这两个元素编程行内元素,一旦成为行内元素,他们不就跑到一行去了吗.所以我们来看看方法一. 方法一就是使用行内元素,行内元素可以摆在一行,我们现在明确的知道,h1标签和p标签他们都是块元素,所以我们该用哪个元素呢? 我们接触过的行内元素就是a标签,我们是否可以使用a标签来解决这个问题呢?其实a标签是不合