css中的垂直对齐（vertical-align）

最新推荐文章于 2024-03-11 16:54:43 发布

weixin_30919429

最新推荐文章于 2024-03-11 16:54:43 发布

阅读量719

点赞数

原文链接：http://www.cnblogs.com/cowboybusy/p/10200295.html

版权

该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐

垂直对齐只对inline或inline-block元素有效

在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式（内容可以是block元素）

1.基线（baseline）

使用字母x辅助找基线

inline或inline-block基线：在后加一个字符x，x的底部所在位置就是基线位置

父元素基线：在父元素最后加一个x，x的底部所在位置就是基线位置

空的inline或inline-block元素的基线：元素底部

非空inline或inline-block元素，但是overflow属性不为visible(默认是visible)的基线：元素底部

图片基线：图片底部

2.实例：

消除图片底部的空白

<div style="background-color: red">
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1546240915886&di=d2c1f2208334db8646f712bc51305491&imgtype=0&src=http%3A%2F%2Fm.360buyimg.com%2Fn12%2Fg13%2FM04%2F10%2F10%2FrBEhVFLLt0YIAAAAAAKIy0fC9qQAAHsIgNcNAwAAojj467.jpg%2521q70.jpg">
</div>

　　默认情况下，vertical-align的对齐方式是基线对齐，也就是内部元素跟父元素的基线对齐，img基线在图片底部，可以在img后加一个x字符确定父元素的基线，发现x底部（父元素的基线）跟父元素的buttom会有一段距离，图片要跟父元素基线对齐，所以也会有一段小空白

　 x的基线跟父元素底部有一点距离是因为有些字符，比如p会往下写，要预留点距离

文字的基线类似英语本：

红线的位置就是基线，也就是我们在本子上写字符x，x的底部

消除方法：

1.把img的display属性改为block，由于垂直对齐对block元素无效，也就没有空白了

2.把img对齐方式改为bottom，让其底部与父元素底部对齐

style="vertical-align: bottom;"

基线对齐现象解析

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <style type="text/css">
    div {
        width: 100px;
        height: 100px;
        border: 1px solid red;
        display: inline-block;
    }
    </style>
</head>

<body>
    <div>
    </div>
    <div class="align">为什么？x</div>
    
</body>

</html>

上例中，如果两个div都没有内容，会对齐，body的基线可以在后一个div后面加一个x确定，两个div的基线都在底部（没有内容，是inline-block）,所以他们都会沿着基线对齐

在div中添加了内容后，就是下面的情况：

为了方便定位基线，在第二个div和body的结尾都加了x，可以清楚看到第二个div和body的基线，它们要跟第一个div的基线（底部）对齐

没有特殊设置的情况下（marging，padding这些偏移设置），元素中子元素都是从顶部开始第一行的

元素垂直居中

下面并不能使文字垂直居中

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <style type="text/css">
    div {
        width: 100px;
        height: 100px;
        border: 1px solid red;
        display: inline-block;
        
    }
    </style>
</head>

<body>
    
    <div class="align">
        <span style="vertical-align: middle;background-color: blue;">hello</span>x
    </div>
    
</body>

</html>

效果图如下：

middle会将设置了middle的元素的中点跟父元素中最后一个x的中点（没有x就可以先构造一个x看中点在哪里）对齐，由于我们对span和后面的x没有设置行高（后面的x是一个隐式的inline元素，单独的文字都是隐式inline），默认行高约为fontsize的一点几倍，两个元素都还挤在上面，所以设置middle对齐，也是只能使得文字稍稍下移

如果要居中显示，必须把行高设大，因为垂直对齐只会发生在行内，上面div虽然很长，但是hello和x所在行能移动的距离有限，所以先要把他们所在行撑起来，比如把span的行高设置为和div一样，就能达到居中的目的了（还不需要设置middle）

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <style type="text/css">
    div {
        width: 100px;
        height: 100px;
        border: 1px solid red;
        display: inline-block;
        
    }
    </style>
</head>

<body>
   
    <div class="align">
        <span style="line-height: 100px;display: inline-block;background-color: blue;">hello</span>x
    </div>
    
</body>

</html>

可以看到span居中了(没有设置middle)，x也居中了，因为行高减去显示文字所需要的高度，剩下的高度（叫行间距）总是上下平分（分别为行半间距）

下面的例子并不能使文字和图片垂直居中对齐

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <style type="text/css">


    </style> 
</head>

<body>
    <img src="./up/wangshu.jpg" style="width: 100px;height: 100px;">
    <span style="line-height: 100px;display: inline-block;background-color: red;vertical-align: middle;">链家地产</span>
</body>

</html>

居中对齐是相对父元素的，所以span的对齐是相对body，跟img无关，如果在body最后面加一个x定位，span中文字的中线会跟x的中线对齐，效果如下：

把middle设置到img就好了：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <style type="text/css">


    </style> 
</head>

<body>
    <img src="./up/wangshu.jpg" style="width: 100px;height: 100px;vertical-align: middle;">
    <span style="line-height: 100px;display: inline-block;background-color: red">链家地产</span>
</body>

</html>

这时候，父元素基线并没有变（x字符的中间位置没有变），图片的中线要跟x的中间位置对齐，所以下沉了，而不是span上升

指定具体数值来调整元素垂直对齐（正数升高，负数下降）

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <style type="text/css">


    </style> 
</head>

<body>
    <img src="./up/wangshu.jpg" style="width: 100px;height: 100px;">
    <span style="vertical-align: 40px;">链家地产</span>
</body>

</html>

可以利用display:table和vetical-align使得内容垂直居中

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>display:table实现垂直居中</title>
</head>
<body>

<style type="text/css" rel="stylesheet">
    .table {
        display: table;
        margin: 5px;
        width: 500px;
        height: 300px;
        background-color: #ccc;
    }

    .cell {
        display: table-cell;
        padding: 10px;
        vertical-align: middle;/*该属性是定义行内元素垂直对齐的，只有行内元素会生效。在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式。*/
    }
</style>
<div class="table">
        <div class="cell">内容内容内容内容内容内内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</div>
</div>
</body>
</html>