• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >html/xhtml > 关于div中img,span垂直居中的问题

关于div中img,span垂直居中的问题

作者:佚名 字体:[增加 减小] 来源:互联网 时间:2017-08-05

本文主要包含div,img,span,垂直,居中等相关知识,佚名 希望在学习及工作中可以帮助到您

如下所示:

  1. <html>  
  2. <head>  
  3. <style>  
  4. #test *{vertical-align:middle;}   
  5. </style>  
  6. <body>  
  7. <div  
  8. id="test">  
  9. <img  
  10. src="http://127.0.0.1:7001/wsc/images/message.png"/>  
  11. <span>sdfhsdhfdksfjhtes:</span>  
  12. </div>  
  13. </body>  
  14. </html>  

请注意:#test *{vertical-align:middle;}s

#test *表示了div里面所有元素,当然包含了span,input,img这些内联元素了。

vertical-align
初始值: baseline(缺省值)
可否继承:否
适用于: 内联元素
说明:vertical-align:baseline使元素的基线同父元素的基线对齐.
警告:vertical-align不能影响表格单元中的内容的对齐,对于块元素中的内容也一样.

请注意:vertical-align只影响内联元素,比如span,img,em,input,a等这些元素,而对div,h3,p等这些块元素是无效的。

以上就是小编为大家带来的关于div中img,span垂直居中的问题的全部内容了,希望对大家有所帮助,多多支持微课江湖~

您可能想查找下面的文章:

  • div宽度设置width:100%后再设置padding或margin超出父元素的解决办法
  • 向div元素添加圆角边框的实现方法
  • 关于div中img,span垂直居中的问题
  • html css 控制div或者table等固定在指定位置的实现方法
  • 用DIV遮罩解决鼠标直接勾选checkbox无效的问题
  • 顶部固定div可设置半透明效果
  • div嵌套html不用iframe
  • div容器自增长后其内的背景色或图片随之增长
  • div与span之间有什么区别
  • div可以输入内容不用input作为输入框屏蔽自动的input样式

相关文章

  • 2017-08-05表单文件选择框样式自定义示例
  • 2017-08-05网页速度优化一览
  • 2017-08-05用jquery进行修复在iframe下的页面锚点失效问题
  • 2017-08-05关于html中meta的作用(网上搜集整理得来)
  • 2017-08-05html设置加粗、倾斜、下划线、删除线等字体效果
  • 2017-08-05图片元素img在IE6下出现多余空白问题
  • 2017-08-05将html标签在浏览器居中显示的css样式
  • 2017-08-05一个IE死机bug
  • 2017-08-05在html中插入音频文件在浏览器中播放音频文件的兼容性问题
  • 2017-08-05button没有指定type为submit点击按钮跳转不到指定url

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • 浅谈HTML中的标记
    • 关于input的file 控件及美化
    • 超链接的宽度和高度直接设置不起作用的解决方法
    • HTML 无序列表项目符号使用图片的CSS写法
    • Html中使用自定义图片来实现checkbox显示的方法
    • 浅析响应式框架中,table表头自动换行的快速解决方法
    • iframe的src赋值问题(服务器端)
    • div与span之间有什么区别
    • src或者css背景图的url值为base64编码代码
    • Html中value和name属性的作用及其使用介绍

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有