div span img对齐,垂直居中对齐问题
我想你们在前端开发中或多或少都遇到过这种问题,文字和图片不能平齐,很是头疼。
HTML代码:
<div class="">小太阳<span>小太阳</span><img src="img/考拉.jpeg" style="width: 24px;height: 24px;" alt=""></div>
介绍一个css属性:vertical-align
默认值是baseline。
当我们给 span 和 img 都加上 vertical-align: middle ; 会怎样尼?
<div class="" style="">小太阳<span style="vertical-align:middle">小太阳</span><img src="img/考拉.jpeg" style="width: 24px;height: 24px;vertical-align:middle" alt=""></div>
发现第一个“小太阳”没对齐,当然是给 div 也加上vertical-align: middle ;
其属性值及解析如下:
baseline:将支持valign特性的对象的内容与基线对齐
sub:垂直对齐文本的下标
super:垂直对齐文本的上标
top:将支持valign特性的对象的内容与对象顶端对齐
text-top:将支持valign特性的对象的文本与对象顶端对齐
middle:将支持valign特性的对象的内容与对象中部对齐
bottom:将支持valign特性的对象的文本与对象底端对齐
text-bottom:将支持valign特性的对象的文本与对象底端对齐
给div 设置 行高line-height属性
line-height值改得和DIV或者SPAN的height相同!
div span img对齐,垂直居中对齐问题的更多相关文章
- p标签中的span标签文字垂直居中对齐
<p>轻舞飞扬<span>第一次亲密接触</span></p> p标签的font-size:30px; span标签的font-size:24px; 让 ...
- div中字垂直居中对齐
div中的文本水平居中,一般都是用text-align:center;就可以解决,那么垂直居中呢,知道vertiacl-align:middle;但有时候却不起作用:整理下div中文本垂直居中对齐的问 ...
- html文本垂直居中对齐
html文本垂直居中对齐,代码如下: <div id="box" style="height:100px; line-height:100px; border:1p ...
- css水平垂直居中对齐方式
1.文字或者内联元素的垂直水平居中对齐 css属性 -- 水平居中:text-aligin:center; 垂直居中: line-height:height; 例子:. html: <div c ...
- css-实现元素垂直居中对齐
css-实现元素/元素内容,垂直居中对齐 一.单行内容的垂直居中(line-height:行高方法) 只考虑单行是最简单的,无论是否给容器固定高度,只要给容器设置 line-height 和 heig ...
- bootstrap modal 垂直居中对齐
bootstrap modal 垂直居中对齐 文章参考 http://www.bubuko.com/infodetail-666582.html http://v3.bootcss.com/Jav ...
- CSS垂直居中对齐
用CSS有多种方法实现垂直居中对齐.如果已知外部div的高度,不管是否知道内部div的高度,垂直居中实现起来很简单,但如果内部div高度是变量,如文字,垂直居中实现起来就比较复杂了,很可能需要使用ha ...
- 两个div横向排列,顶端对齐的方式。
1.左右两个div都设置为float:left,如果右边div没有设置宽度,右边div的宽度会根据div里的内容自动调整. <!DOCTYPE html PUBLIC "-//W3C/ ...
- CSS 文本垂直居中对齐
文本垂直居中对齐是一个很常见的问题,这里总结一下. 一.容器高度固定,单行文本垂直居中对齐 height:20px; line-height:20px; overflow:hidden; 二.容器高度 ...
- HTML DIV中文字自动换行 , 顶部对齐
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta ht ...
随机推荐
- spring 5.x 系列第21篇 —— spring 定时任务 (xml配置方式)
源码Gitub地址:https://github.com/heibaiying/spring-samples-for-all 一.说明 1.1 项目结构说明 关于任务的调度配置定义在springApp ...
- JavaWeb入门_模仿天猫整站Tmall_SSH实践项目
Tmall_SSH 技术栈 Struts2 + Hibernate + Spring + Jsp + Tomcat , 是 Java Web 入门非常好的练手项目 效果展示: 模仿天猫前台 模仿天猫后 ...
- (数据科学学习手札62)详解seaborn中的kdeplot、rugplot、distplot与jointplot
一.简介 seaborn是Python中基于matplotlib的具有更多可视化功能和更优美绘图风格的绘图模块,当我们想要探索单个或一对数据分布上的特征时,可以使用到seaborn中内置的若干函数对数 ...
- (一)C#编程基础复习——开启编程之旅
回想当年学习编程,刚开始学习是非常艰苦的,可能是因为文科生原因,刚开始接触工科类的知识不是很擅长,上去大学第一年基本没有好好学习编程,入门C#编程基础一窍不通,也许那时年少无知,第二学期开始奋发图强, ...
- PyCharm2018 汉化&激活
一.汉化 将下载好的resources_cn_PyCharm_2018.1_r2.jar 放入pycharm 的lib 目录中,启动app即可 下载链接: https://pan.baidu.com/ ...
- 微服务-springcloud-注册中心
创建服务注册中心(eureka-server) 1.创建项目,选择 Eureka Server 别的都不要选择,next-finish 2.application.yml中写入如下信息:通过eurek ...
- fiddler无法抓取chrome浏览器请求的解决方案之关闭代理软件
最近安装fiddler后,按照通用设置后依然无法抓取到chrome的请求,经检查,我本地的chrome安装了代理管理的插件Switchy,无论选择直接连接还是选择使用代理连接,插件都会屏蔽fiddle ...
- Requests方法 -- 项目实现自动发送邮件
"""1.discover方法里面有三个参数:-case_dir:这个是待执行用例的目录.-pattern:这个是匹配脚本名称的规则,test*.py意思是匹配test开 ...
- ~~核心编程(二):面向对象——类&属性~~
进击のpython 类&属性 虽然我们上一part写了一个面向对象的程序:人狗大战 但是如果在面向对象来看 你这些的就不够规范 你既然选择用面向对象的思想来写 那你就要符合人家的定义规范和操作 ...
- 文件传输——TCP/IP协议介绍总结
一.链路层 数据链路层的工作特性: 1.为IP模块发送和接收IP数据报2.为ARP模块发送ARP请求和接收ARP应答(ARP:地址解析协议,将IP地址转换成MAC地址)3.为RARP发送RARP请求和 ...