vertical-align应用

最新推荐文章于 2022-07-15 00:07:03 发布

xgbm_k

最新推荐文章于 2022-07-15 00:07:03 发布

阅读量194

点赞数

分类专栏：工作日记

本文链接：https://blog.csdn.net/xgbm_k/article/details/77655609

版权

工作日记专栏收录该内容

35 篇文章 0 订阅

订阅专栏

今天见有人用vertical-align让logo居中，觉得比较好用，就自己在页面上加了一个却怎么都不起作用。查了一下，发现用vertical-align是有一些要求的。主要参考了http://blog.csdn.net/diudiu5201/article/details/54666809
我使用的html和style见下。在使用vertical-align的元素外层必须加上line-height。

      <div class="logo">
        <img src="../assets/logo.png"></img>
      </div>
  .logo{
      display: inline-block;
      float: left;
      padding-right: 30px;
      height: 100%;    
      line-height: 80px;
  }
  .logo img{
      display: inline-block;
      vertical-align: middle;
      padding: 0 10px;
      margin: 0 10px;      
      height: 50px;
  }