zoukankan      html  css  js  c++  java
  • li中的图片和文字不对齐div+css,解决方法

     
    1. <style>
    2. li{
    3.     margin: 2px 3px 3px 8px;
    4.     padding: 5px;
    5.     background: url(/images/sider_siteinfo.gif) no-repeat 0 50%;
    6.     list-style-type: none;
    7.     list-style-position: inside;
    8. }
    9.  
    10. </style>
    11.  
    12. <div>
    13.  
    14. <ul>
    15.   <li> 小弟,出道,人生地不熟,请各位指教</li>
    16.   <li> 小弟,出道,人生地不熟,请各位指教</li>
    17.   <li> 小弟,出道,人生地不熟,请各位指教</li>
    18.   <li> 小弟,出道,人生地不熟,请各位指教</li>
    19.   <li> 小弟,出道,人生地不熟,请各位指教</li>
    20. </ul>
    21. </div>

    50%是垂直居中的意思!

    控制图片和LI里面内容的间距
      1、加 可以加大间距
      2、padding-left来控制图片和LI里面内容的间距:
     
    1. <style>
    2. li{
    3.     margin: 2px 3px 3px 8px;
    4.     padding-left: 25px;
    5.     background: url(/images/sider_siteinfo.gif) no-repeat 0 50%;
    6.     list-style-type: none;
    7.     list-style-position: inside;
    8. }

    如果不是以背景色的图片,加上vertical-align:middle

     
    1. <ul>
    2.   <li> <img style=‘vertical-align:middle' src='icon01.gif' />前面的图片要和我对齐</li>
    3.   <li> <img style='vertical-align:middle' src=‘icon01.gif' />前面的图片要和我对齐</li>
    4.   <li> <img style='vertical-align:middle' src=‘icon01.gif' />前面的图片要和我对齐</li>
    5.   <li> <img style='vertical-align:middle' src=‘icon01.gif' />前面的图片要和我对齐</li>
    6.   <li> <img style='vertical-align:middle' src=‘icon01.gif' />前面的图片要和我对齐</li>
    7. </ul>
  • 相关阅读:
    返回顶部,跳到底部
    [Swift]LeetCode1068.
    [Swift]LeetCode1067. 范围内的数字计数 | Digit Count in Range
    [Swift]LeetCode1066. 校园自行车分配 II | Campus Bikes II
    [Swift]LeetCode1065. 字符串的索引对 | Index Pairs of a String
    [Swift]LeetCode1064. 不动点 | Fixed Point
    [Algorithm]扔杯问题
    CleanWipe:无需密码彻底卸载Symantec(赛门铁克)
    [Swift]获取UIColor的HSV/HSB值(Hue色相、S饱和度、B亮度)
    [Swift]LeetCode1050.合作至少三次的演员和导演 | Actors and Directors Who Cooperated At Least Three Times
  • 原文地址:https://www.cnblogs.com/pricks/p/1616241.html
Copyright © 2011-2022 走看看