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

<!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. 判断JS的数据类型

    typeof.instanceof. constructor. prototype方法比较 (摘自如何判断JS中的数据类型) 1. 使用typeof操作符. 对一个值使用 typeof 操作符可能返回 ...

  2. mysql学习笔记--数据完整性

    一.数据完整性包括: 1. 域完整性 2. 实体完整性 3. 引用完整性 二.保证实体完整性 1. 主键约束 2. 唯一约束 3. 自动增长列 三.保证域完整性 1. 数据类型约束 2. 非空约束 3 ...

  3. 762. Prime Number of Set Bits in Binary Representation二进制中有质数个1的数量

    ［抄题］: Given two integers L and R, find the count of numbers in the range [L, R] (inclusive) having a ...

  4. [leetcode]716. Max Stack 最大栈

    Design a max stack that supports push, pop, top, peekMax and popMax. push(x) -- Push element x onto ...

  5. [leetcode]53. Maximum Subarray最大子数组和

    Given an integer array nums, find the contiguous subarray (containing at least one number) which has ...

  6. Android后台监控指定app的输入内容，抢红包，模拟点击原理

    Android开启辅助功能之后可以用AccessibilityService 去后台监控指定的app的输入内容,也可以监控到app的动作 以及通知栏的动作, 抢红包其实就根据通知栏出现了红包的通知消息 ...

  7. 杨其菊201771010134《面向对象程序设计（Java）》第三周学习总结

    <面向对象程序设计(Java)>第三周学习总结 第一部分:理论知识 这周课程没有新进度,由于感觉对基础语法的不熟悉,复习了一遍前三章的细碎知识,学到一些之前不知道的原理: 1.计算机高级语 ...

  8. Android手机上浏览器不支持带端口号wss解决方案

    首先抄个示例过来,命名为wss-test.html,然后传到服务器: <!DOCTYPE HTML> <html> <head> <meta http-equ ...

  9. 【Mybatis】MyBatis对表执行CRUD操作（三）

    本例在[Mybatis]MyBatis配置文件的使用(二)基础上继续学习对表执行CRUD操作 使用MyBatis对表执行CRUD操作 1.定义sql映射xml文件(EmployeeMapper.xml ...

  10. 深入理解定位父级offsetParent及偏移大小offsetTop / offsetLeft / offsetHeight / offsetWidth

    深入理解定位父级offsetParent及偏移大小 [转载] 前面的话 偏移量(offset dimension)是javascript中的一个重要的概念.涉及到偏移量的主要是offsetLeft.o ...