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

<!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. Linux yum源配置

    Linux yum源配置 本文介绍Red Hat下yum源配置方法,Redhat使用yum网络源需要购买服务,但是本地yum源不会收费. CentOS用户自带yum源,并且yum不收费. 准备工具: ...

  2. 使用 Ansible 统计服务器资源利用率

    使用 Ansible 统计服务器资源利用率: 3 条 shell 脚本实现统计: CPU 利用率统计: top -bn1 | grep load | awk '{printf "CPU Lo ...

  3. [leetcode]56. Merge Intervals归并区间

    Given a collection of intervals, merge all overlapping intervals. Example 1: Input: [[1,3],[2,6],[8, ...

  4. windows 命令行出现中文乱码

    1.打开CMD.exe命令行窗口 2.通过 chcp命令改变代码页chcp 65001  //UTF-8的代码页为65001

  5. 机器学习（二）--------单变量线性回归(Linear Regression with One Variable)

    面积与房价 训练集 (Training Set) Size       Price 2104       460 852         178 ...... m代表训练集中实例的数量x代表输入变量 ...

  6. js string to date

    Date.prototype.pattern=function(fmt) { //alert(this.getFullYear()); fmt=fmt.toUpperCase(); var o = { ...

  7. Java多线程系列1 线程创建以及状态切换

    我们知道线程线程有三种创建方式 1实现Runnable接口 2 继承Thread类 3使用Callable和Future接口创建线程.具体是创建Callable接口的实现类,并实现clall()方法. ...

  8. 【APP测试（Android）】－－客户端数据库

  9. 解决win10系统无法安装.NET Framework 3.5

    方法1:“我的电脑”,单击右键选择“管理” 在打开的“计算机管理”窗口中依路径“服务和应用程序—服务”打开,在列表中找到“Windows Update”并双击打开. 启动类型:自动. 服务状态下面点击 ...

  10. springboot 简单使用 activemq 接收消息

    1.在pom.xml 加入配置文件 <dependency> <groupId>org.springframework.boot</groupId> <art ...