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

<!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. MySQL安装与启动

    1.MySQL安装包下载 下载地址:https://dev.mysql.com/downloads/mysql/ 这里我的电脑是WIN764位的,大家根据自己的电脑自己选择要下载的包 2.解压安装 解 ...

  2. Linux vfpd锁定用户目录

    在linux ftp配置中,为了防止用户cd 到其他目录,需要锁定用户的根目录. Step1:修改配置文件 [root@ess ~]# vi /etc/vsftpd/vsftpd.conf #chro ...

  3. 前端移动开发之rem

    前言 作为一名前端工程师,我们不仅要会PC端开发,还要会移动端开发,而且现在移动端占据主要流量,所以掌握移动端开发的技能更是必须的. 那么进行移动端的开发,什么是必须,我们想要的效果是什么? 自适应. ...

  4. adb、monkey常用命令

    adb.monkey常用命令 1.查看连接设备 adb devices 2.连接android模拟器 adb connect 127.0.0.1:62001 3.安装软件 adb install 这个 ...

  5. Python开发——【循环】语句

    while循环 while 条件: # 要执行的循环体 # 如果条件为真,那么循环体则执行 # 如果条件为假,那么循环体不执行 死循环 count = 0 while True:# 条件永远为真 pr ...

  6. pytbull 手册

    - Official documentation for pytbull v2.1 - Table of content Description Architecture Remote mode Lo ...

  7. GUI设计和UI设计有什么区别？

    首先从技术的角度分析两者处于包含与被包含的关系. GUI=Graphical User Interface,是指在计算机出现后,在屏幕上使用图形界面来帮助(User)与机器打交道用的界面接口,泛指在计 ...

  8. mysql查询数据

    select column,column from table where clause [limit n] [offset]; 查询语句中你可以使用一个或者多个表,表之间使用逗号(,)分割,并使用W ...

  9. 【并发编程】IO模型

    一.要点回顾 为了更好地了解IO模型,我们需要先回顾下几个概念:同步.异步.阻塞.非阻塞 同步: 一个进程在执行某个任务时,另外一个进程必须等待其执行完毕,才能继续执行.就是在发出一个功能调用时,在没 ...

  10. 201771010142 张燕《面向对象程序设计（java）》第一周学习总结

    201771010142 张燕<面向对象程序设计(java)>第一周学习总结 第一部分:课程准备部分 填写课程学习 平台注册账号, 平台名称 注册账号 博客园:www.cnblogs.co ...