vertical-align和text-align
vertical-align只适用于内联元素。
垂直对齐:vertical-align属性(转)
行高与单行纯文字的垂直居中,而如果行内含有图片和文字,在浏览器内浏览时,读者可以发现文字和图片在垂直方向并不是沿中线居中,而是沿基线对齐,如图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>元素默认为块级元素,因此在浏览器内浏览时将不会有任何变化。而如下代码:
<span>元素默认为行内元素,因此显示如图7-35所示。
图7-35垂直对齐属性只对行内元素有效
行内元素还包括图片、表单输入元素等,同时,垂直对齐不能被继承。
7.4.2 属性值详解
在[7.3 行高 line-height]一节中,曾经介绍了文本的基线、顶线、中线和底线,还有内容区域、行内框和行框,而本节的垂直对齐和这几个概念密切相关。
垂直对齐主要属性值的表现形式如图7-36所示。
图7-36 垂直对齐的主要属性值示意
1. 基线对齐(vertical-align : baseline)
基线对齐(vertical-align : baseline)使元素的基线同父元素的基线对齐,例如有如下代码:
line-height : 7em;
font-size : 2em;
vertical-align : baseline;
}
<p>基线对齐<strong>vertical-align:baseline;</strong></p>
则其显示如图7-37所示。
图7-37 基线对齐
而像图片或者输入框这样的元素,本身没有基线,则将其底端同父元素的基线对齐,如图7-34所示。
2. 顶端对齐(vertical-align : top)
顶端对齐(vertical-align : top)是将元素的行内框的顶端与行框的顶端对齐,例如有如下代码:
line-height : 7em;
}
p strong {
vertical-align:top;
line-height:2em;
}
p img {
vertical-align : top;
}
<p>顶端对齐:<strong>vertical- align:top;</strong><img src="img/ddcat_anim.gif" alt="图 片" width="88" height="31" /></p>
则其显示如图7-38所示。
图7-38 顶端对齐
对于<strong>元素,不仅设定了vertical-align,还设定了line-height,这是因为在本章 [7.3.2 内容区域、行内框和行框]一节中关于行内框的说明中介绍过,行高可以改变行内框的高度,如果不重新设定行高, 则<strong>元素继承了父元素<p>的行高,因此行内框高和行框的高度是一样的,则顶端对齐将看不出效果。
3. 文本顶端对齐(vertical-align : text-top)
文本顶端对齐(vertical-align : text-top)是将元素行内框的顶端同文本行的顶线对齐,例如有如下代码,其显示如图7-39所示。
line-height : 7em;
}
p strong {
vertical-align : text-top;
line-height : 2em;
}
p img {
vertical-align : text-top;
}
<p>文本顶端对齐:<strong> vertical- align:top;</strong><img src="img/ddcat_anim.gif" alt="图 片" width="88" height="31" /></p>
图7-39 文本顶端对齐
4. 底端对齐(vertical-align : bottom)
底端对齐(vertical-align : bottom)与顶端对齐(vertical-align : top)相反,如图7-40所示。
图7-40 底端对齐
5. 文本底端对齐(vertical-align : text-bottom)
文本底端对齐(vertical-align : text-bottom)与文本顶端对齐(vertical-align : text-top)相反,如图7-41所示。
图7-41 文本底端对齐
6. 中间对齐(vertical-align : middle)
中间对齐(vertical-align : middle)通常使用在图片上,将图片的垂直方向的中线与文本行的中线对齐,例如有XHTML代码如下,其显示如图7-42所示。
<p>中间对齐为基线上方0.5ex处<img src="img/ddcat_ad.gif" alt="图片" width="180" height="60" /></p>
图7-42 中间对齐
中线的定义为:中线位于基线的上方,与基线的距离为小写字母x高度(即ex)的一半,如图7-36所示。而ex同字体尺寸相关,大部分浏览器认为1ex = 0.5em,因此会将基线以上四分之一em处作为中线来对齐。
7. 上标和下标
上标(vertical-align:super)使元素的基线(替换元素的底端)相对于父元素的基线升高,下标(vertical-align:sub)使元素的基线降低,移动的幅度CSS规范中没有规定,由浏览器来决定。例如有如下代码,其显示如图7-43所示。
图7-43 上标和下标
上下标不会改变元素文字的尺寸大小。
8. 长度值和百分比
和上下标类似,长度值和百分比值可使元素的基线(替换元素的底端)相对于父元素的基线升高(正值)或者降低(负值)。
上下标的移动尺寸是由浏览器确定的,而设定长度值或者百分比,可以精确控制文字上下移动的幅度。
百分比与行高有关,例如有如下代码,其显示如图7-44所示。
<p>行高2em,纵向百分比对齐:<span >100% 正数向上</span>,而<span >-100%负数向下& lt;/span>。</p>
图7-44 百分比对齐
设置垂直对齐会影响到行框高,例如有如下代码,其显示如图7-45所示。
<p>垂直对齐<span >正数向上</span& gt;,而<span >负数向下</span>。< p>行高2em,而设置垂直对齐的文字撑开了行框。</p>
图7-45 垂直对齐对行框的影响
margin:0 auto 与 text-align:center 的区别
基本概念:
1.text-align: 属性规定元素中的文本的水平对齐方式;
该属性通过指定行框与哪个点对齐,从而设置块级元素内文本的水平对齐方式;
一般情况下设置文本对齐方式的时使用此属性。支持值 justify。
Example: div { text-align: left; } //文本居左对齐
注释:所有浏览器都支持 text-align 属性;任何的版本的 Internet Explorer (包括 IE8)都不支持属性值 "inherit"。
2.margin 是设置对象四边的外延边距,被称为外补丁或外边距。
Example: div { margin: 20px 10px 30px 40px; } // 表示对象外边距,顶20px、右10px、下30px、左40px
区别如下:
1.text-align:center 设置文本或img标签等一些内联对象(或与之类似的元素)的居中。
2.margin:0 auto 设置块元素(或与之类似的元素)的居中。
这两个属性IE与FF的理解也有所不同。我们设置一个段落P,在段落内存在一个图片img标签。
注意:
1.当设置body{text-align:center;}。 在IE中,段落P,图片img同时实现了居中对齐,也就是说text-align:center;同时作用于元素p与元素img。 在FF中,段落P,没有能实现居中对齐,而图片img实现了居中对齐,也就是说text-align:center;作用于img标签,而段落p标签没有起到居中的作用。
2.当设置段落 p {margin:0 auto;}。 在IE与FF中,段落P均实现了居中对齐。图片img由于不是作用对象,所以不会居中对齐。
有三种情况需要说明: 1.margin:0 auto;的选择器是作用对象,如div,p,而不是body。如果设置:body { margin:0 auto; }将不会达到任何效果,除非你定义body的宽度,那将会让body内的元素产生位置变化。如我们设置body宽度为500px。对p段落不作任何设置, 我们最大化窗口将会看到段落并非处于窗口的最左上角。 2.设置段落 p {text-align:center;} 将要实现的并不是段落本身的对齐方式,而是段落内元素居中对齐。 3. 设置图片标签img {margin:0 auto;} ,就犯了一个小错误,img类于内联对象,不可以设置图片img标签的margin属性,如果一定要设置,那么先将它的属性转变为块元素,如下面的代 码:img {display:block; margin:0 auto;}
vertical-align和text-align的更多相关文章
- TextMesh Pro Emoji Align With Text(表情和文字对齐)
前言 MMO游戏中需要富文件组件,大体功能包括图文混排,表情,超链接,文字动画等富文本功能,且DC数占用少. 本文选择Unity免费提供的TextMesh Pro 解决方案. 软件环境 Unity3D ...
- DM365视频处理流程/DM368 NAND Flash启动揭秘
出自http://blog.csdn.net/maopig/article/details/7029930 DM365的视频处理涉及到三个相关处理器,分别是视频采集芯片.ARM处理器和视频图像协处理器 ...
- Uboot中start.S源码的指令级的详尽解析【转】
本文转载自:http://www.crifan.com/files/doc/docbook/uboot_starts_analysis/release/html/uboot_starts_analys ...
- 用于RISC-V的Makefile示例
# Initialize ASM For RISC-V .section .text.entry .option norvc .global _start .macro push_reg addi s ...
- HC32L110(四) HC32L110的startup启动文件和ld连接脚本
目录 HC32L110(一) HC32L110芯片介绍和Win10下的烧录 HC32L110(二) HC32L110在Ubuntu下的烧录 HC32L110(三) HC32L110的GCC工具链和VS ...
- Flutter 布局(二)- Padding、Align、Center详解
本文主要介绍Flutter布局中的Padding.Align以及Center控件,详细介绍了其布局行为以及使用场景,并对源码进行了分析. 1. Padding A widget that insets ...
- Extjs Vbox布局方式,以及align种类,flex,pack属性含义简介
VBox布局方式,熟悉下一下几个主要属性: 一.align:字符类型,指示组件在容器内的对齐方式.这个是基于容器的左上角来排列的.pack不同,pack是根据容器的最上边来显示的. 1.left(默认 ...
- Flutter学习笔记(22)--单个子元素的布局Widget(Container、Padding、Center、Align、FittedBox、Offstage、LimitedBox、OverflowBox、SizedBox)
如需转载,请注明出处:Flutter学习笔记(22)--单个子元素的布局Widget(Container.Padding.Center.Align.FittedBox.Offstage.Limited ...
- __attribute__ ((section(".text")))的测试
一.测试原因 在学习u-boot的环境变量过程中,看到有如此的代码,现对涉及到的内容进行实验测试. 二.测试目的 1.了解gcc允许对段的属性进行更改的方法. 2.解决”ENV_IS_EMBEDDED ...
- phaser学习总结之Text对象详解
前言 在phaser学习总结之phaser入门教程中,我们已经入门了phaser,对phaser也有所了解但是我们并没有对phaser中的每个对象的属性和方法进行详解,本章将对phaser中的Text ...
随机推荐
- JAVA数组详解
package com.keke.demo; import java.text.ParseException;import java.text.SimpleDateFormat;import java ...
- COM组件 IDispatch 及双接口的调用
转自:http://blog.csdn.net/cnhk1225/article/details/50555647 一.前言 前段时间,由于工作比较忙,没有能及时地写作.其间收到了很多网友的来信询问和 ...
- KKT条件的物理意义(转)
最好的解释:https://www.quora.com/What-is-an-intuitive-explanation-of-the-KKT-conditions# 作者:卢健龙链接:https:/ ...
- Python 列表表达式 ,迭代器(2) Yield
.yield 暂存为list def max_generator(numbers): current_max = for i in numbers: current_max = max(i, curr ...
- 运行Maven项目时出现invalid LOC header (bad signature)
为Maven小白,今天这问题困扰了我好久,经过多次在网上查询,终于找到了原因.明明一个小问题却耗费很多时间,着实不应该,所以必须记录一下. 报错信息如下: 对话框: 控制台: <span s ...
- Python+Webdriver,中文前加u是unicode格式编码的意思
Python+Webdriver写脚本时,对一些输入框赋值会涉及到输入中文,这时需要在中文前加u 举个例子,在用百度搜索时,要在搜索输入框内输入值, 我用的编码格式是utf-8,向输入框内输入值是:d ...
- wireshark使用相关问题
问题1: 打开wireshark,没有出现过滤器 解决1: 使用管理员方式登录 过滤: http and ip.src == 192.168.0.10 and ip.dst == 192.168.0. ...
- The Closest M Points
The Closest M Points http://acm.hdu.edu.cn/showproblem.php?pid=4347 参考博客:https://blog.csdn.net/acdre ...
- Eclipse中的SVN操作
--------------------siwuxie095 Eclipse 中的 SVN 操作 (一)发布项目 ...
- PAT L1-009 N个数求和(模拟分数加法)
本题的要求很简单,就是求N个数字的和.麻烦的是,这些数字是以有理数“分子/分母”的形式给出的,你输出的和也必须是有理数的形式. 输入格式: 输入第一行给出一个正整数N(<=100).随后一行按格 ...