day7 06 vertical-align 垂直方向对齐

1.vertical-align:bottom 文字与图片底部对齐;

2.vertical-align:baseline 文字与图片基线对齐;

3.vertical-align:middle    文字与图片居中对齐;

4.vertical-align:top       文字与图片顶部对齐;

 

1.vertical-align:bottom 文字与图片底部对齐;

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        img {
            vertical-align: bottom; 
            文字和图片的底部对齐

        }
        div {
            border: 2px solid red ;
        }
    </style>

</head>
<body>
    <div>
        <img src="images/tudou.jpg" alt="">
        my文字
    </div>
</body>
</html>

效果图如下:

day7 06 vertical-align 垂直方向对齐

 

 2.vertical-align:baseline 文字与图片基线对齐;

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        img {
            vertical-align: baseline; 
           /* 图片与文字的基线对齐; */

        }
        div {
            border: 2px solid red ;
        }
    </style>

</head>
<body>
    <div>
        <img src="images/tudou.jpg" alt="">
        my文字
    </div>
</body>
</html>

效果图如下:

day7 06 vertical-align 垂直方向对齐

 

 

3.vertical-align:middle    文字与图片居中对齐;

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        img {
            vertical-align: middle; 
           /* 图片与文字的基线对齐; */

        }
        div {
            border: 2px solid red ;
        }
    </style>

</head>
<body>
    <div>
        <img src="images/tudou.jpg" alt="">
        my文字
    </div>
</body>
</html>

效果图如下:

day7 06 vertical-align 垂直方向对齐

 

 4.vertical-align:top       文字与图片顶部对齐;

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        img {
            vertical-align: top; 
           /* 图片与文字的顶部对齐; */

        }
        div {
            border: 2px solid red ;
        }
    </style>

</head>
<body>
    <div>
        <img src="images/tudou.jpg" alt="">
        my文字
    </div>
</body>
</html>

效果图如下:

day7 06 vertical-align 垂直方向对齐

 

 图片与边框是是有缝隙的,这个缝隙可以用

display:block  来解决 转成还内块元素,就不存在缝隙问题了。

也可以用vertical-align:middle or top 来解决。 

上一篇:算法分析与设计作业3


下一篇:操作格子---蓝桥杯算法集