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>
  • 相关阅读:
    ajax同步和异步
    vue组件
    type of的返回值有哪些
    git配置
    vue 获取时间戳对象转换为日期格式
    JavaScript运行机制
    单页面开发首屏加载慢,白屏如何解决
    单页面和多页面开发的优缺点
    【安全测试】sql注入
    【Python学习一】使用Python+selenium实现第一个自动化测试脚本
  • 原文地址:https://www.cnblogs.com/pricks/p/1616241.html
Copyright © 2011-2022 走看看