CSS深入理解之vertical-align 笔记@慕课网原创_慕课网


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        img{
            vertical-align: -10px;
        }
        p{
            background: #ccc;
        }
        .justify{

            text-align: center;
        }
        .justify span{
            display: inline-block;
            vertical-align: middle;
            height: 100px;
            background: red;
        }
        .justify i{
            display: inline-block;
            height: 100%;
            vertical-align: middle;

        }

        .test-list{
            display: inline-block;
            border: 1px solid #ccc;
            padding: 10px;
        }
        .test-list span{
            display: inline-block;
            width: 200px;
            vertical-align: middle;
        }
        .test-list img{
            vertical-align: middle;
        }

        .justify-fix{
            display: inline-block;
            width: 250px;
        }
    </style>
</head>
<body>
<p class="justify" >
    <span>
        2.垂直居中
        inline-block
        0宽带100%高度辅助元素
        vertical-align:middle
    </span>
    <i></i>
</p>

1.小图标文字对齐，vertical-align 负值，无兼容差异  20 -14
2.垂直居中
inline-block
0宽带100%高度辅助元素
vertical-align:middle

<p >
    <img src="1.png" >1.小图标文字对齐，vertical-align 负值，无兼容差异  20 -14
</p>

<div class="test-list">
    <img src="1.png"/>
    <span>文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</span>
</div>

<p><img src="" alt="">
</p>

1.line-height: 0;vertical-align: top;        
OR 
2.<i class="justify-fix">x</i>

<p >
    <img src="1.png" width="250" />
    <img src="1.png" width="250" />
    <img src="1.png" width="250" />
    <img src="1.png" width="250" />
    <i class="justify-fix">x</i>
</p>

</body>
</html>```