盒子居中的局部处理 - xiaoxustudy

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            #box{
                width: 350px;
                height: 200px;
                background-color: red;
                margin: 20px;
				text-align: center;
				line-height: 200px;
            }
			span{
				background-color: skyblue;
			}
        </style>
    </head>
    <body>
        <div id="box">
			<span>小许🎵</span>
			<img src="pic1.jpg">
			<span>小许🎵</span>
        </div>
    </body>
</html>

父盒子高度 200px，基线大概在黄色线的位置，span标签正好在基线中间。图片的基线大概是蓝色线的位置。现在想要让图片基线跟父盒子基线重合。需要用到 vertical-align 属性。

（基线相关网络资料：https://www.cnblogs.com/keyi/p/5841348.html ）

（ vertical-align ：https://www.runoob.com/cssref/pr-pos-vertical-align.html ）

可以看到 vertical-align 默认属性值为 baseline。

下面几个是需要了解的属性值：

实现了文字跟图片都居中。

posted on 2020-05-06 21:36 xiaoxustudy 阅读(207) 评论(0) 收藏举报

刷新页面返回顶部