行内元素和行内块级元素的垂直方向对齐

作者:日期:2016-07-31 11:06:17 点击:443

vertical-align基线对齐

所有浏览器都支持 vertical-align 属性

vertical-align 属性设置元素的垂直对齐方式

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

默认值 baseline
继承性 no
javascript 语法 object.style.verticalAlign=”bottom”


值(value) 描述
baseline 默认。元素放置在父元素的基线上
sub 垂直对齐文本的下标
super 垂直对齐文本的上标
top 把元素的顶端与行中最高元素的顶端对齐
text-top 把元素的顶端与父元素字体的顶端对齐
middle 把此元素放置在父元素的中部
bottom 把元素的顶端与行中最低的元素的顶端对齐
text-bottom 把元素的底端与父元素字体的底端对齐
length 可以说设置多少像素。允许使用负值。
% 使用 “line-height” 属性的百分比值来排列此元素。允许使用负值。
inherit 规定应该从父元素继承 vertical-align 属性的值


块级元素和行内元素可以根据这些属性进行互相转化,例如:

<html>
<head>
<style type="text/css">
img.top {vertical-align:text-top}
img.bottom {vertical-align:text-bottom}
</style>
</head>

<body>
<p>
这是一幅<img class="top" border="0" src="img.jpg" />位于段落中的图像。
</p>

<p>
这是一幅<img class="bottom" border="0" src="img.jpg" />位于段落中的图像。
</p>
</body>
</html>

下面给大家一个基本实例,大家可以在浏览器中运行看看,到底是什么样的效果,通过f12控制台来调整属性值,看看到底有什么样的区别,动手试试永远是你最好的老师。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>vertical-align</title>
<style>
span{
text-decoration: underline;
color: red;
}

.test p{border:1px solid #000;font-size:16px;line-height:2;}
.test span{margin-left:3px;font-size:12px;}
.baseline span{vertical-align:baseline;}
.sub span{vertical-align:sub;}
.super span{vertical-align:super;}
.top span{vertical-align:top;}
.text-top span{vertical-align:text-top;}
.middle span{vertical-align:middle;}
.bottom span{vertical-align:bottom;}
.text-bottom span{vertical-align:text-bottom;}
.length span{vertical-align:10px;}
</style>
</head>
<body>
<ol class="test">
<li class="baseline">
<strong>与基线对齐</strong>
<p>参考内容<span>基线对齐</span></p>
</li>
<li class="sub">
<strong>与参考内容的下标对齐</strong>
<p>参考内容<span>下标对齐</span></p>
</li>
<li class="super">
<strong>与参考内容的上标对齐</strong>
<p>参考内容<span>上标对齐</span></p>
</li>
<li class="top">
<strong>对象的内容与对象顶端对齐</strong>
<p>参考内容<span>要对齐的内容</span></p>
</li>
<li class="text-top">
<strong>对象的文本与对象顶端对齐</strong>
<p>参考内容<span>要对齐的内容</span></p>
</li>
<li class="middle">
<strong>对象的内容与对象中部对齐</strong>
<p>参考内容<span>要对齐的内容</span></p>
</li>
<li class="bottom">
<strong>对象的内容与对象底端对齐</strong>
<p>参考内容<span>要对齐的内容</span></p>
</li>
<li class="text-bottom">
<strong>对象的文本与对象顶端对齐</strong>
<p>参考内容<span>要对齐的内容</span></p>
</li>
<li class="length">
<strong>与基线算起的偏移量</strong>
<p>参考内容<span>偏移量对齐</span></p>
</li>
</ol>
</body>
</html>

那么在我们对文字进行控制的时候,还需要注意行高,字号等因素。行高指的是文本行的基线间的距离,但是文本之间的空白距离不仅仅是行高决定的, 同时也受字号的影响。并且不同浏览器对行高的解析也有细微的差距,例如在Opera内,行高将按照 CSS定义的将行距除以2增加到内容区域的上下两边,而IE和Firefox则不是完全平分。
举个栗子:
行高100px{line-height:100px;}
这句话如果画图的话汉字的最上和最下是text-top和text-bottom ,整个高度的二分之一是middle,字母x的下方就是基线。并且行内元素和行内块元素默认都是基线对齐。

 

上一篇: 元素的基础属性之display

下一篇: 网站css样式之颜色和单位