CSS vertical-align 属性

定义和用法

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

说明

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

默认值：	baseline
继承性：	no
版本：	CSS1
JavaScript 语法：	object.style.verticalAlign="bottom"

实例

垂直对齐一幅图像：

img
  {
  vertical-align:text-top;
  }

TIY

浏览器支持

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

注释：任何的版本的 Internet Explorer （包括 IE8）都不支持属性值 "inherit"。

可能的值

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

TIY 实例

垂直对齐图象

本例演示如何在文本中垂直排列图象。

我的实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        h1{
            width: 800px;
            margin: 0 auto;
            text-align: center;
            border: 1px solid #000;
        }
        img{width: 100px;height: 100px;}
        h1 span{
            vertical-align: 38px;
        }
    </style>
</head>
<body>
    <h1>
        <img src="../images/logo.jpg" alt="">
        <span>慕课网</span>
    </h1>
</body>
</html>

　效果：

posted on 2020-07-19 16:52 ksy_c 阅读(137) 评论(0) 编辑收藏举报