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

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title>vertical-align_CSS参考手册_web前端开发参考手册系列</title>

<style>

.test p{border:1px solid #000;font-size:16px;line-height:2;}

.test a{margin-left:5px;font-size:12px;}

.baseline a{vertical-align:baseline;}

.sub a{vertical-align:sub;}

.super a{vertical-align:super;}

.top a{vertical-align:top;}

.text-top a{vertical-align:text-top;}

.middle a{vertical-align:middle;}

.bottom a{vertical-align:bottom;}

.text-bottom a{vertical-align:text-bottom;}

.length a{vertical-align:10px;}

.percent a{vertical-align:10%;}

</style>

</head>

<body>

<ul class="test">

<li class="baseline">

<strong>与基线对齐</strong>

<p>参考内容<a href="?">基线对齐</a></p>

</li>

<li class="sub">

<strong>与参考内容的下标对齐</strong>

<p>参考内容<a href="?">下标对齐</a></p>

</li>

<li class="super">

<strong>与参考内容的上标对齐</strong>

<p>参考内容<a href="?">上标对齐</a></p>

</li>

<li class="top">

<strong>对象的内容与对象顶端对齐</strong>

<p>参考内容<a href="?">要对齐的内容</a></p>

</li>

<li class="text-top">

<strong>对象的文本与对象顶端对齐</strong>

<p>参考内容<a href="?">要对齐的内容</a></p>

</li>

<li class="middle">

<strong>对象的内容与对象中部对齐</strong>

<p>参考内容<a href="?">要对齐的内容</a></p>

</li>

<li class="bottom">

<strong>对象的内容与对象底端对齐</strong>

<p>参考内容<a href="?">要对齐的内容</a></p>

</li>

<li class="text-bottom">

<strong>对象的文本与对象顶端对齐</strong>

<p>参考内容<a href="?">要对齐的内容</a></p>

</li>

<li class="length">

<strong>与基线算起的偏移量</strong>

<p>参考内容<a href="?">偏移量对齐</a></p>

</li>

<li class="percent">

<strong>百分比</strong>

<p>参考内容<a href="?">百分比</a></p>

</li>

</ul>

</body>

</html>

vertical-align_CSS参考手册_web前端开发参考手册系列的更多相关文章

  1. 百度面试经历_web前端开发

    百度面试经历_web前端开发 --2016年09月24日校招杭州站 刚面试完,担心过去就忘记掉,故回来时在地铁上用手机码下面试题目,供参考,也留作自己以后的面试参考依据.

  2. Web 前端开发规范手册

    一.规范目的 Web 前端开发规范手册 1.1 概述 ......................................................................... ...

  3. Web前端开发规范手册

    一.规范目的 1.1  概述 为提高团队协作效率, 便于后台人员添加功能及前端后期优化维护, 输出高质量的文档, 特制订此文档. 本规范文档一经确认, 前端开发人员必须按本文档规范进行前台页面开发.  ...

  4. 问题11：web前端开发规范手册(转)

    一.规范目的 1.1  概述 ..................................................................................... ...

  5. 1+X证书Web前端开发规范手册

    一.规范目的 1.1 概述 为提高团队协作效率, 便于后台人员添加功能及前端后期优化维护, 输出高质量的文档, 特制订此文档. 本规范文档一经确认, 前端开发人员必须按本文档规范进行前台页面开发. 本 ...

  6. Web前端开发最佳实践系列文章汇总

    Web前端开发最佳实践(1):前端开发概述 Web前端开发最佳实践(2):前端代码重构 Web前端开发最佳实践(3):前端代码和资源的压缩与合并 Web前端开发最佳实践(4):在页面中添加必要的met ...

  7. Web前端开发必备手册（Cheat sheet）

    转自:http://blog.bingo929.com/cheat-sheets-for-web-develop.html Cheat sheet这个词组如果直译成中文,意思大概是”作弊小抄”之类的词 ...

  8. 『编写高质量代码Web前端开发修炼手册』读书笔记--高质量的CSS

    1.怪异模式和DTD 标准模式:浏览器根据规范表现页面 怪异模式:模拟老浏览器行为防止老站点无法工作(为了兼容老式浏览器的代码),如果漏写DTD(Document Type Definition文档定 ...

  9. 【Web前端开发最佳实践系列】前端代码推荐和建议

    一.常用的前端文件的组织结构: 1.js (放置JavaScript代码) lib(放置框架JavaScript文件) custom.js 2.css(放置CSS样式代码) lib(放置框架CSS文件 ...

随机推荐

  1. 396. Rotate Function 移动加权求和，取最大值

    ［抄题］: Given an array of integers A and let n to be its length. Assume Bk to be an array obtained by ...

  2. node.js 使用 net 模块模拟 websocket 握手，进行数据传递。

    websocket 是一种让浏览器与服务器之间建立持久的连接,并能进行双向数据传输的一种协议. websocket 属性应用层协议,基于tcp传输协议,并复用http的握手通道. 一.如何进行webs ...

  3. node.js中使用 http-proxy 创建代理服务器

    代理,也称网络代理,是一种特殊网络服务,允许一个终端通过代理服务与另一个终端进行非直接的连接,这样利于安全和防止被攻击. 代理服务器,就是代理网络用户去获取网络信息,就是信息的中转,负责转发. 代理又 ...

  4. jfinal处理完html提交过来的数据，将处理信息返回给html页面。html根据返回值进行相应的处理

    1.前台jQuery代码: $.ajax({ url: "/admin/jcsjpz/syxmdy/RemoveSyxm", data: {data: id}, success: ...

  5. HDU 3667.Transportation 最小费用流

    Transportation Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)To ...

  6. java 线程池简单例子

    package com.hra.riskprice; import com.hra.riskprice.SysEnum.Factor_Type; import com.hra.riskprice.po ...

  7. wince 6.0 汉字乱码

    CStdioFile file; file.Open(…); file.WriteString(_T("abc你好"));//只能写入abc 解决办法: 使用setlocale语句 ...

  8. 2019.02.11 bzoj4767: 两双手（组合数学+容斥dp）

    传送门 题意简述:你要从(0,0)(0,0)(0,0)走到(ex,ey)(ex,ey)(ex,ey),每次可以从(x,y)(x,y)(x,y)走到(x+ax,y+ay)(x+ax,y+ay)(x+ax ...

  9. MFC程序执行后台操作时不允许操作界面的一种方法

    在使用MFC编写界面程序时,有时候会遇到像点击按钮后,后台进行大量操作后才显示处理结果这种情况,在后台处理过程中,界面不应该被允许做任何操作,这里介绍一种方法. 解决办法 点击按钮后,弹出一个模态对话 ...

  10. [Err] 1418 - This function has none of DETERMINISTIC, NO SQL, or READS SQL DATA in its declaration and binary logging is enabled (you *might* want to use the less safe log_bin_trust_function_creator【s

    问题:执行创建函数的sql文件报错如下: [Err] 1418 - This function has none of DETERMINISTIC, NO SQL, or READS SQL DATA ...