css vertical-align 深入理解 

// 1 小图标和文字的对齐
// 通过vertical-align 负值
<style media="screen">
      .img-class{
        width:20px;
        height: 20px;
        vertical-align:-10px;
      }
    </style>
<div>
      <img class="img-class" src="http://www.17sucai.com/preview/1268063/2018-08-02/Friends/images/icon-vip1.png" alt="">
      web前端，就职于腾讯ISUX上海设计中心，喜欢卖萌打杂，同事都叫我张老师，(*^__^*) 嘻嘻……
    </div>

 

//2.不定尺寸图片或多行文字的垂直居中

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>不定尺寸图片或多行文字的垂直居中</title>
    <!--
    1. 主体元素inline-block化
    2. 0宽度100%高度辅助元素；
    3. vertical-align:middle
    -->
    <style media="screen">
      .container{
        height: 200px;
        border:1px solid #000;
        background: #eee;
        text-align: center;
      }
      .img-class{
        width:100px;
        height: 100px;
      }
      img{vertical-align: middle;}
      span{ vertical-align: middle;}
      i{display: inline-block; height: 100%; vertical-align: middle;}

    </style>
  </head>
  <body>
    <div class="container">
      <img class="img-class" src="http://www.17sucai.com/preview/1268063/2018-08-02/Friends/images/icon-vip1.png" alt="">
      <span>web前端，就职于腾讯ISUX上</span>
      <i></i>
    </div>
  </body>
</html>

 

// text-top 和text-bottom的区别
1.vertical-align:text-top;
    盒子的顶部和父级content area的顶部的对齐
2.vertical-align:text-bottom;
    盒子的底部和父级content area的底部对齐

 

posted @ 2018-08-27 22:59  renyangli  阅读(148)  评论(0)  编辑  收藏  举报