使用 flex 布局
<div class="login">
<img class="login-img" src="images/logo.png"/>
<span class="login-wel">早上好,欢迎登录 ~</span>
</div>
.login-top {
display: flex;
align-items: center;
.login-img {
width: 34px;
height: 40px;
}
.login-wel {
font-size: 28px;
margin-left: 8px;
color: #ffffff;
font-weight: 400;
}
}
操作 display: table 完成img图片垂直居中
<div class="tablebox">
<div id="imgbox">
<img src="1.jpg" alt="">
</div>
</div>
.tablebox {width: 300px;height: 250px;background: #fff;display: table}
#imgbox{display: table-cell;vertical-align: middle;}
#imgbox img{width: 100px}
用绝对定位完成垂直居中
<div class="posdiv">
<img src="1.jpg" alt="">
</div>
.posdiv{width: 300px;height: 250px;background: #fff;position: relative; margin:0 auto}
.posdiv img{width: 100px;position: absolute;top: 50%;margin-top: -50px;} // transform:translateY(-50%);
Css 如何快速让 button 按钮标签水平居中
Css 解决 image 标签间距问题
css 解决 vertical-align: middle 失效问题