zoukankan      html  css  js  c++  java
  • 图标和文字对齐的方法

    在平时写页面的过程中,常遇到要把小图标与文字对齐的情况。比如:

                                                                                                  

    总结了两种方法,代码量都比较少。

    第一种

        对img设置竖直方向对齐为middle,

    1
    2
    3
    4
    5
    6
    <div>
            <img src="" alt="" class="heart">
            <span>1169</span>
            <img src="" alt="" class="comment">
            <span>1168</span>
    </div>

     

    1
    2
    3
    4
    5
    6
    7
    div{
         height:30px;
         line-hight:30px;
    }
    .heart,.comment{
            vertical-align:middle;
    }   

     第二种

        把小图标设为背景图片,调整padding

    1
    2
    3
    4
    <div>
            <span class="heart">1169</span>
            <span class="comment">1168</span>
    </div>
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    .hear{
            background:url(images/heart.png) left center no-repeat;
            margin-right:20px;
    }
    .comment{
            background:url(images/comment.png) left center no-repeat;
    }
    .hear,.comment{
            height:30px;
            line-height:30px;
            padding-left:20px;
    }

    原文地址:http://www.cnblogs.com/qjqcs/p/5303284.html

  • 相关阅读:
    负载均衡
    二叉树反转
    hashMap 和红黑树
    linux c++ 服务器编程,收藏一个测试例子
    某某音乐盒面试
    Linux中的文件i节点
    linux 文件格式压缩
    类string的构造函数、拷贝构造函数和析构函数
    计算二叉树的深度
    string转换为decimal
  • 原文地址:https://www.cnblogs.com/weibo806/p/5788040.html
Copyright © 2011-2022 走看看