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>
  • 相关阅读:
    【2014 Multi-University Training Contest 3 1002】/【HDU 4888】 Redraw Beautiful Drawings
    8 shell命令之find
    [网络]_[0基础]_[使用putty备份远程数据]
    Cstyle的UEFI导读:第20.0篇 IGD OpRegion interface &amp;&amp; IGD OpRegion PROTOCOL
    Mac下使用MySQL
    Qt中截图功能的实现
    gdb经常使用命令总结
    Graphical Shell with WebShell
    SSH WebShell: SSH在线WEB管理器安装教程
    python—webshell_醉清风xf_新浪博客
  • 原文地址:https://www.cnblogs.com/pricks/p/1616241.html
Copyright © 2011-2022 走看看