为什么布局中要想vertical-align起效果必须设置line-height
<!doctype html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="css/index.css"> <link rel="stylesheet" href="css/ui.css"> <title>无标题文档</title> </head> <body> <!--top区域--> <div class="top"> <div class="wrap clearfixed"> <div class="top-left"> <img src="img/icon-call.png" alt="telephone"> <span>010-114/116114电话预约</span> </div> <div class="top-right"> <span>欢迎来到城市预约挂号统一平台 请</span> <span>登录</span> <span>注册</span> <span>帮助中心</span> </div> </div> </div> <!--head区域--> <div class="head"> <div class="wrap clearfixed"> <div class="head-left"> <img src="img/logo.png" alt="logo"> </div> <div class="head-right"> <img src="img/ui-search.jpg" alt="search"> </div> </div> </div> </body> </html>
@charset "utf-8";
/* CSS Document */
*{margin: 0;padding: 0;}
.wrap{width: 1000px;margin: 0 auto;position: relative;}
.clearfixed {zoom: 1;}
.clearfixed::after {display: block;clear: both;content: "";}
/*top区域*/
.top{background-color: #f5f5f5;width: 100%;height: 30px;line-height: 30px;font-size: 12px;}
.top-left{float: left;}
.top-left img{display: inline-block;width: 20px;height: 20px;vertical-align: sub;}
.top-left span{color: #868686;}
.top-right{float: right;}
.top-right span{color: blue;}
.top-right span:nth-child(1){color: #868686;}
.top-right span:nth-child(2){margin-left: 32px;cursor: pointer;}
.top-right span:nth-child(3){margin-left: 20px;cursor: pointer;}
.top-right span:nth-child(4){margin-left: 78px;cursor: pointer;}
/*head区域*/
.head{width: 100%;height: 90px;line-height: 90px;}
.head-left{float: left;}
.head-left img{height: 90px;}
.head-right{float: right;}
.head-right img{display: inline-block;vertical-align: middle;width: 326px;height: 38px;}.top-left img和.head-right img
13
收起
正在回答
2回答
同学你好，图片的底线和文字的基线是对齐显示的，可以结合四线三格理解，第三条线是基线，第四条线是底线。设置line-height属性，大概是图片底部在垂直中间，大部分情况下需要结合vertical-align属性让图片中心在垂直中间显示，用在img上较多，记住这种使用方法就好。
祝学习愉快！
bbbboom
2020-01-29 20:22:39
基线的原因吧，给你分享一个https://www.jianshu.com/p/dea069fecb62
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星