vertical-align--跟着李南江学编程

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

vertical-align: top; 盒子顶部
vertical-align: bottom; 盒子底部
vertical-align:text- top; 文字顶部
vertical-align:text- bottom; 文字底部
vertical-align: baseline; 基线
vertical-align: middle; 中线

一、vertical-align的原理

vertical-align根据以下 6条线 对齐
基线：与最短一个元素对齐的线，如图，与最短元素x对齐的线
中线：基线向上四分之一处
其余四条线在下图容易看出

image.png
1.vertical-align: top; 与盒子的顶部对齐

            div{
                width: 400px;
                font-size: 40px;
                margin: 200px auto;
                background: skyblue;
                line-height: 100px;
            }
            img{
                vertical-align: top;
            }

            <div>
                 指趣江南ypx 
                 <img src="img/dog.jpg"/>
            </div>

image.png

2.vertical-align: bottom; 与盒子的底部对齐

            img{
                vertical-align: bottom;
            }

image.png
3.vertical-align: text-top;与文字的顶部对齐

            img{
                vertical-align: text-top;
            }

由于和文字顶部对齐，图片将盒子的高度撑大

image.png
4.vertical-align: text-bottom;与文字的底部对齐

            img{
                vertical-align: text-bottom;
            }

由于和文字底部对齐，图片将盒子的高度撑大

image.png

5.vertical-align:baseline ;与基线对齐

            img{
                vertical-align: baseline;
            }

与最短元素x对齐

image.png
6.vertical-align:middle ;与中线对齐
基线向上四分之一

            img{
                vertical-align: middle;
            }

image.png

二、vertical-align和text-align的区别

1.text-align是设置给需要对齐元素的 父级
2.vertical-align是设置给需要对齐元素的 本身
3.vertical-align只对行内元素有效

我正在跟着江哥学编程,更多前端+区块链课程: www.it666.com