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

作者：

2016-07-31 11:06:17

449

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样式之颜色和单位