当img和span一行，设置垂直居中

分手后的思念是犯贱 2021-12-19 15:17 604阅读 0赞

当img和span标签放在同一行时，应该如何设置，使它们在该行垂直居中？

  1. <style type="text/css">
  2.         .box{
  3.             width: 100%;
  4.             background-color: #ccc;
  5.         }
  6.         .box img{
  7.             width: 40px;
  8.             height: 40px;
  9.         }
  10.         .box span{
  11.             background-color: lightblue;
  12.         }
  13.     </style>
  15. <body>
  16.     <div class="box">
  17.         <img src="logo.png">
  18.         <span>这里是span标签</span>
  19.     </div>
  20. </body>

效果：
普通状态下
给img和span样式加上：

  1. vertical-align:middle;

即可。

  1. .box img{
  2.     width: 40px;
  3.     height: 40px;
  4.     vertical-align:middle;
  5. }
  6. .box span{
  7.     background-color: lightblue;
  8.     vertical-align:middle;
  9. }

在这里插入图片描述

发表评论

表情：
评论列表 （有 0 条评论，604人围观）

还没有评论，来说两句吧...

相关阅读