vertical-align使用方法

介绍:
vetical-align主要用来处理图片和文字直接的位置关系

首先我们需要了解中文文本的组成,文本有基线、底线、中线、顶线组成。

可以把文字想象在一个文本框里面,文本四条线的高度,构成了文本框的高。

演示:

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {border-bottom: 1px solid #333;}img {box-sizing: border-box;border: 1px solid red;}</style>
</head><body><div><img src="apple.jpg" alt=""><span>大家好</span></div>
</body></html>

效果:

可以看到图片和文字之间存在了空白分析,原因就是因问css图片默认vertical-align: baseline,可以通过改变vertical-align的参数,来改变图片与文字之间的关系。

vertical-align属性说明
该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐，只对行内元素和行内块元素有效

参数:

参数	作用
baseline	默认值,与所在行的基线对齐
top	与所在行的顶部对齐
bottom	与所在行的底部对齐
middle	与所在行的中间对齐

效果展示:

top值
baseline默认值
bottom值

4.![在这里插入图片描述](https://img-blog.csdnimg.cn/20201206221044410.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTMyMTMzMQ==,size_16,color_FFFFFF,t_70

解决图片之间的空白缝隙

给img标签转换为display:block
1.1. 这可以解决上面图片的空白缝隙,左右图片解决不了
解决左右相邻图片空白缝隙,给图片添加浮动

vertical-align使用方法相关推荐

php垂直对齐,CSS垂直对齐不起作用的原因及解决方法
verticla-align用于调整内联元素的垂直位置,但是有时候它不起作用,本篇文章将来给大家分享关于CSS垂直对齐不起作用的原因和解决方法. 我们先来分析一下导致垂直对齐无效的原因我想很多人都会 ...
关于图标和文字对齐的方法整理。
关于图标和文字对齐的方法整理. 标签的图标修饰很常见.但是通常都会遇到小图标和文字对齐的若干问题.尤其是图标和文字字号不一致的时候,怎么对齐都觉得不自然. 当然我今天不讨论自不自然的问题. 网上关于这 ...
highcharts日常用法的總結之legend 方法總結
PS:因為在工作中經常會用的這個插件,所以做個日常歸納方便自己查閱,也幫助大家更快速的解決關於這個插件的各種問題和需要的樣式,希望也能幫助大家,謝謝,如有雷同純屬巧合,慢慢完善中. 1:legend ...
element表格左对齐方法
表格左对齐方法项目中需要到表格左对齐,类似于下面这种东西上百度找了很多种方法,有说在css改样式的,也有说在表格标签里面添加 align='center' 方法的,然而调来调去都不行,也不能全局更 ...
淘宝里table中tr之间有空隙的解决方法
最近在公司遇到了淘宝里table <tr>之间有空隙的问题,直接正题不罗嗦: 方法一:在table中所有图片都加入"align="top"" 举例: ...
ctpn：图像文字检测方法
点击上方"小白学视觉",选择加"星标"或"置顶" 重磅干货,第一时间送达 01 区别本文工作基于faster RCNN , 区别在于 1. ...
DW中CSS属性详解
作者:未知来源:5D多媒体在Dreamweaver的CSS样式里包含了W3C规范定义的所有CSS1的属性,Dreamweaver把这些属性分为Type(类型).Background(背 ...
8个好用到爆的Python实用技巧，至少不用吃亏半年
我们在使用 Python处理大多数工作.在此过程中,我们会不断学到了一些有用的技巧和窍门. 在这里,我尝试以 A - Z 开头的格式分享这些技巧中的一些,并且在本文中简单介绍这些方法,如果你对其中一个 ...
HighCharts基本使用
一.简叙 HighCharts是一个非常强大的画图插件,在以后的工作汇报,数字展示,它将是一把利器.既然是插件,那么就有它的使用规则,我们只需要遵循它的使用规则,就可以画出我们想要的展示效果了.期待吗 ...
Zabbix配置详解
为什么80%的码农都做不了架构师?>>> zabbix 配置了解 Hosts zabbix中的hosts就是指你想监控的设备,如服务器.工作站.交换机等等.如果你想监控某个主机 ...

vertical-align使用方法

vertical-align使用方法相关推荐

最新文章

热门文章