垂直对齐:vertical-align属性
作者:ddcatlee 来源:豆豆猫的窝 发布时间:2008-07-11 20:55:00
上一小节讲解了行高与单行纯文字的垂直居中,而如果行内含有图片和文字,在浏览器内浏览时,读者可以发现文字和图片在垂直方向并不是沿中线居中,而是沿基线对齐,如图7-34所示。
图7-34 文字和图片内容默认垂直对齐方式为基线对齐
这是因为,元素默认的垂直对齐方式为基线对齐(vertical-align: baseline)。
7.4.1 语法
vertical-align属性的具体定义列表如下:
语法: vertical-align : baseline | sub | super | top | text-top | middle | bottom | text-bottom | <百分比> | <长度> | inherit
说明: 设置元素内容的垂直对齐方式
值: baseline:基线对齐;sub:下标;super:上标;top:顶端对齐;text-top:与文本的顶端对齐;middle:中部对齐;bottom:底端对齐;text-bottom:文本的底端对齐;
百分比和长度:CSS2,可为负数。
初始值: baseline
继承性: 不继承
适用于: 行内元素和单元格(table-cell)元素
媒体: 视觉
计算值: 百分比和长度值为绝对长度;其他同指定值
此处需要特别注意的是:垂直对齐属性只对行内元素有效。例如有如下代码:
<p style=”vertical-align:super;”>垂直对齐<span>上标</span></p>
<p>元素默认为块级元素,因此在浏览器内浏览时将不会有任何变化。而如下代码:
<p>垂直对齐<span style="vertical-align:super;">上标</span></p>
<span>元素默认为行内元素,因此显示如图7-35所示。
图7-35垂直对齐属性只对行内元素有效
行内元素还包括图片、表单输入元素等,同时,垂直对齐不能被继承。


猜你喜欢
- 本文实例讲述了python实现爬取千万淘宝商品的方法。分享给大家供大家参考。具体实现方法如下:import timeimport level
- 前言文接上回,我们已经使用gojs实现了一个最最最基本的树形布局。这次我们开始对图形的骨架进行一个内容展示上的丰富和显示风格上的美化。可以说
- python文件特定行插入和替换实例详解python提供了read,write,但和很多语言类似似乎没有提供insert。当然真要提供的话,
- 1、概述 经常用到轮廓查找和多边形拟合等opencv操作,因此记录以备后续使用。本文代码中的阈值条件对图片没有实际意义,仅仅是为了测试。原图
- 序列化把对象(变量)从内存中变成可存储或传输的过程称之为序列化,在Python中叫pickling,在其他语言中也被称之为serializa
- pickle 是一个 python 中, 压缩/保存/提取 文件的模块,字典和列表都是能被保存的.但必须注意的是python2以ASCII形
- 问题:编写一个在1,2,…,9(顺序不能变)数字之间插入+或-或什么都不插入,使得计算结果总是100的程序,并输出所有的可能性。例如:1 +
- 最简单的模式,C/S模式实现聊天室从半双工开始,何谓半双工?半双工即是说双方可以互发消息,但一次只能一个用户发送。 只要稍微会点s
- 1、ThreadPoolExecutor多线程<1>为什么需要线程池呢?对于io密集型,提高执行的效率。线程的创建是需要消耗系统
- Scrapy下载图片项目介绍Scrapy是一个适用爬取网站数据、提取结构性数据的应用程序框架,它可以通过定制化的修改来满足不同的爬虫需求。使
- 这里是WMP的版本ClassID,从WMP7后ID就成了clsid:6BF52A52-394A-11D3-B153-00C04F79FAA6
- vue3官方文档 defineProps 和 defineEmits 都是只能在 <
- OpenCV的imread不能读取中文路径问题import numpy as npimport cv2cv_img = cv2.imdeco
- 1、net/http爬虫net/http配合正则表达式爬虫。package mainimport ("fmt""
- 初学Python,在网上看到Python图片转字符画的教程,我也来尝试下。 首先我们要用到Python的PIL库的Image模块,PIL(P
- oracle 的表空间实例详解查询表空间SELECT UPPER(F.TABLESPACE_NAME) "表空间名",
- Golang与python线程详解及简单实例在GO中,开启15个线程,每个线程把全局变量遍历增加100000次,因此预测结果是 15*100
- 前言:随着企业应用的不断迭代,不断扩大,应用的发布发布可能涉及多个团队,如pc端,手机端,小程序端等等。应用发布也就成为了一项高风险,高压力
- 前言最近在数据库的一张表添加两个字段,后来提示什么磁盘空间不足什么什么的,后来数据库就断开连接了,之后就一直连接不上去后来,最后经过思考终于
- 颜色的变化跟人类的智慧一样,是无穷的,每个阶段都会有流行的色彩,有属于一个时代的颜色!WEB2.0是一个概念,它宣扬,定位了一些东西,以用户