vertical-align line-height box-sizing 块和行内

最新推荐文章于 2024-02-27 16:22:06 发布

sanly_shi

最新推荐文章于 2024-02-27 16:22:06 发布

阅读量127

点赞数

分类专栏： css3

本文链接：https://blog.csdn.net/weixin_36774307/article/details/86610310

版权

css3 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<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>
    html,body{
        margin: 0
    }
    .div1{
        height: 200px;
        width: 300px;
        background-color: rosybrown;
    }
    .div1 span{
        /* //设置line-height使文字垂直居中 */
        line-height: 200px;
        font-size: 20px;
    }
    .div1 img{
        width: 100px;
        display: inline-block;
        /* 设置vertical-align 使图片居中 */
        vertical-align: middle;
    }
    </style>
</head>
<body>
    <div class="div1">
        <span>测试line-height居中</span>
        <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1548236066368&di=4ec13e1fb118eead7ba2d1111d2cb0c0&imgtype=0&src=http%3A%2F%2Fp4.img.cctvpic.com%2Fnettv%2Fnews%2Fspecial%2Fsyw%2F20110119%2Fimages%2F103764_1295426014778.jpg" alt="">
    </div>
</body>
</html>

<!-- vertical-align    该属性定义  {行内元素的基线}  相对于  {该元素所在行}  的基线的垂直对齐    所以这个属性是行内元素的属性 -->
<!-- 常见行内元素 a span label img input text-area select button  -->

sanly_shi

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vertical-align line-height box-sizing 块和行内

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
复制链接

扫一扫

专栏目录