微信公众号 讲师中心
首页
文章
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 自媒体 新闻
专题
后端开发 web前端 数据库 开发工具 php框架 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 新闻
AI工具
AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令
学习
大前端 后端开发 数据库 移动端 运维开发 计算机基础
编程手册
大前端 后端开发 数据库 移动端 运维开发 计算机基础
下载
js特效 网站源码 工具下载 类库下载 网站素材 学习资源 插件扩展 手机/移动开发 手机游戏
最近更新
搜索
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程
自媒体 新闻
首页 > web前端 > html教程 > 正文

li中的图片和文字不对齐div+css,解决方法_html/css_WEB-ITnose

php中文网
发布： 2016-06-24 12:28:17
原创
1646人浏览过

 

 
    　　
  •  小弟,出道,人生地不熟,请各位指教
    • 　　
  •  小弟,出道,人生地不熟,请各位指教
    • 　　
  •  小弟,出道,人生地不熟,请各位指教
    • 　　
  •  小弟,出道,人生地不熟,请各位指教
    • 　　
  •  小弟,出道,人生地不熟,请各位指教

<style>li{    margin: 2px 3px 3px 8px;    padding: 5px;    background: url(/images/sider_siteinfo.gif) no-repeat 0 50%;    list-style-type: none;    list-style-position: inside;}</style><div><ul>　　<li> 小弟,出道,人生地不熟,请各位指教</li>　　<li> 小弟,出道,人生地不熟,请各位指教</li>　　<li> 小弟,出道,人生地不熟,请各位指教</li>　　<li> 小弟,出道,人生地不熟,请各位指教</li>　　<li> 小弟,出道,人生地不熟,请各位指教</li></ul></div>
登录后复制


50%是垂直居中的意思！

控制图片和LI里面内容的间距
　　1、加 可以加大间距
　　2、padding-left来控制图片和LI里面内容的间距: 

<style>li{    margin: 2px 3px 3px 8px;    padding-left: 25px;    background: url(/images/sider_siteinfo.gif) no-repeat 0 50%;    list-style-type: none;    list-style-position: inside;}
登录后复制

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

Levity
Levity

AI帮你自动化日常任务

Levity 206
查看详情 Levity

    　　
  •  li中的图片和文字不对齐div+css,解决方法_html/css_WEB-ITnose前面的图片要和我对齐
    • 　　
  •  li中的图片和文字不对齐div+css,解决方法_html/css_WEB-ITnose前面的图片要和我对齐
    • 　　
  •  li中的图片和文字不对齐div+css,解决方法_html/css_WEB-ITnose前面的图片要和我对齐
    • 　　
  •  li中的图片和文字不对齐div+css,解决方法_html/css_WEB-ITnose前面的图片要和我对齐
    • 　　
  •  li中的图片和文字不对齐div+css,解决方法_html/css_WEB-ITnose前面的图片要和我对齐

<ul>　　<li> @@##@@前面的图片要和我对齐</li>　　<li> @@##@@前面的图片要和我对齐</li>　　<li> @@##@@前面的图片要和我对齐</li>　　<li> @@##@@前面的图片要和我对齐</li>　　<li> @@##@@前面的图片要和我对齐</li></ul>
登录后复制

li中的图片和文字不对齐div+css,解决方法_html/css_WEB-ITnoseli中的图片和文字不对齐div+css,解决方法_html/css_WEB-ITnoseli中的图片和文字不对齐div+css,解决方法_html/css_WEB-ITnoseli中的图片和文字不对齐div+css,解决方法_html/css_WEB-ITnoseli中的图片和文字不对齐div+css,解决方法_html/css_WEB-ITnose
相关标签：
解决方法

大家都在看：

HTML速学教程(入门课程)
HTML速学教程(入门课程)

HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！

下载
来源：php中文网
收藏 点赞
上一篇：div css入门教程，更简洁CSS清理浮动方式：clearfix_html/css_WEB-ITnose 下一篇：横向图文列表 zt十天学会web标准(div+css)_html/css_WEB-ITnose
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
最新问题
HTML列表标签怎么用_HTML列表标签如何清晰展示条目内容 无序列表用展示并列项，如苹果、香蕉、橙子；有序列表用表示顺序内容，如打开电脑、登录系统；定义列表用解释术语，如HTML对应超文本标记语言。
2025-11-25 22:08:31
578
HTML网格布局怎么优化_HTMLgrid布局的高级用法与性能优化 掌握CSSGrid高级用法需合理定义容器与项目，避免过度嵌套，使用minmax()和fr实现响应式布局，通过grid-template简写提升性能，用gap替代margin控制间距，避免频繁修改网格结构导致重排，动画优先使用transform和opacity，并结合DevTools的GridOverlay和CLS监控进行调试优化，确保布局高效稳定。
2025-11-25 22:07:02
600
HTML语义化标签怎么正确选择_HTML不同场景下语义化标签的选用技巧 正确使用HTML语义化标签能提升结构清晰度、SEO和无障碍访问。应根据内容含义选择标签：header用于页眉，nav专用于导航，main包含核心内容且唯一，article包裹独立内容如文章，section划分主题区块，aside表示附加信息，footer定义底部内容。标题用h1~h6合理分级，强调用strong或em，引用用blockquote或q，缩写用abbr，时间用time。避免滥用div或错误嵌套，如nav内不需section，非独立单元不用article。语义化关键在于按内容意图编码，
2025-11-25 22:05:02
883
HTML表单跨域提交怎么实现_HTML表单跨域提交的解决方案与方法 跨域表单提交受限于同源策略，可通过后端代理、CORS配合AJAX、隐藏iframe等方式实现。1.后端代理：表单提交至同源接口，由后端转发请求，无需目标服务器配置CORS，安全性高；2.CORS+AJAX：JavaScript拦截提交，用fetch发送跨域请求，需目标服务器设置Access-Control-Allow-Origin，并可携带凭证；3.JSONP仅支持GET，不适用于表单提交；4.隐藏iframe可发送跨域请求但无法读取响应，适用于日志上报等场景。推荐优先使用后端代理或CORS方案
2025-11-25 21:58:55
244
HTML表单数据校验提示怎么美化_HTML表单验证提示信息的样式美化技巧 通过CSS自定义.error-tip类设置圆角边框、浅红背景、深红文字，并添加过渡动画；结合JavaScript监听blur或submit事件，动态控制提示显示隐藏；在提示中加入警告图标提升可读性，实现美观友好的表单校验提示。
2025-11-25 21:50:02
1000
HTML表单autofocus怎么用_HTML表单元素自动聚焦autofocus属性的用法 autofocus属性用于页面加载时让表单元素自动获得焦点，提升用户体验；2.支持input、textarea和button等元素，语法为添加autofocus布尔属性；3.建议每页仅设置一个，避免冲突，移动设备可能受限；4.适用于搜索框、登录表单和评论区域等场景，增强易用性。
2025-11-25 21:45:07
993
HTML5表单属性怎么用_HTML5placeholderrequired等表单属性的功能与用法 HTML5新增表单属性提升交互与验证效率：placeholder提供输入提示，required确保必填项，autofocus实现自动聚焦，pattern支持正则校验，autocomplete控制自动填充，multiple允许多值输入，min、max和step限定数值范围，结合使用可减少JavaScript依赖并增强用户体验。
2025-11-25 21:38:02
791
HTML布局兼容性怎么解决_HTML不同浏览器布局兼容性问题与语义化解决 不同浏览器因渲染引擎差异导致HTML布局不一致，需通过CSS重置、语义化标签、现代布局兼容处理及多环境测试来解决。
2025-11-25 21:33:05
224
HTML5WebWorkers怎么用_HTML5WebWorkers后台线程的使用方法与实例 WebWorkers是HTML5的多线程机制，通过创建后台线程执行耗时任务，避免阻塞UI线程。1.创建worker.js文件，编写耗时计算逻辑并监听消息；2.主页面使用newWorker()加载Worker，通过postMessage发送数据，onmessage接收结果，实现主线程与Worker线程间通信，提升页面响应速度和用户体验。
2025-11-25 21:27:07
463
HTML重置按钮怎么设置_HTMLreset重置按钮的功能与使用场景 重置按钮通过或实现，用于将表单恢复初始状态，适用于搜索、注册等需频繁修改的场景，点击后清空输入、复选状态及下拉选项，但不提交数据或刷新页面。
2025-11-25 21:17:02
269
相关专题
更多>
热门推荐
开源免费商场系统广告
热门教程
更多>
相关推荐
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • PHP学习

  • 技术支持

  • 返回顶部