vertical-align的使用及解决图片底部默认空白缝隙问题和图像与文本垂直方向居中对齐

一、vertical-align的使用

经常用于设置图片或者表单【行内块级元素】和文字垂直对齐

vertical-align属性值

basesline:默认，元素放置在父元素的基线上
top：把元素的顶端与行中最高元素的顶部对齐
middle:把此元素放置在父元素的中部
bottom:把元素的顶部与行中最低的元素的顶部对齐

二、解决图片底部默认空白缝隙问题

问题引入

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>解决图片底部默认空白缝隙问题</title><style type="text/css">.container{border: 1px solid yellow;}img{width: 100px;height: 100px;}</style></head><body><div class="container"><img src="img/图片.jpg"/></div></body>
</html>

此时，我们可以看到，图片底部与父容器之间有一段空隙。原因：行内块级元素会和文字的基线对齐。

解决方法
（1）给图片添加 vertical-align middle | top | bottom
（2）把图片转换成块级元素 display:block;

俩者比较，我个人更喜欢前者，因为后者一旦设置成块级元素时，该元素是独占一行，不利于布局。

三、文本垂直方向居中对齐

问题引入

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>vertical-align</title><style>.container{width: 300px;height: 200px;background-color: #f5f5f5;}p{display: inline-block;font-size: 30px;}</style></head><body><div class="container"><img src="img/车锁.png"/><p>车锁</p></div></body>
</html>

此时，如果我们要实现，文字和图片垂直方向居中时，我们应该使用vertical-align，对图片元素增加属性vertical-align：middle;即可实现。

欢迎访问我的个人博客

vertical-align的使用及解决图片底部默认空白缝隙问题和图像与文本垂直方向居中对齐相关推荐

解决图片底部默认空白缝隙问题
图片底侧会有一个空白缝隙,原因是行内块元素会和文字的基线对齐. 主要解决方法有两种: 1. 给图片添加 vertical-align:middle | top| bottom 等.(提倡使用) 2. ...
解决图片底部的空白缝隙
1.原因:图片(行内块元素)和文字默认基线对齐,所以生出了缝隙. 2.解决方法方法一:给图片添加vertical-align属性(⭐推荐使用) img{/* top | middle | botto ...
CSS | 解决html中img标签图片底部存在空白缝隙的问题
目录问题描述原因分析解决方案写在最后问题描述在学习CSS的过程中,我们经常会遇到图片底侧存在空白缝隙的问题. 代码示例: <!DOCTYPE html> <html la ...
解决图片底部有空白间隙的问题
问题描述 right-top未设置高度时,插入高为100px的图片,right-top却被撑到了104px. 原因这是因为形如图片的行内块元素的默认垂直对齐方式是基线对齐(baseline),给文字 ...
css解决图片底部留白问题
css解决图片底部留白问题参考文章: (1)css解决图片底部留白问题 (2)https://www.cnblogs.com/yuzihong/p/10683181.html 备忘一下.
【必看】HTML+CSS去掉img图片底部的空白的3种通用方法
去掉img图片底部的空白的3种通用方法效果如图: 图片下方有莫名的空白,总是去不掉! 空白产生的原因:图片是内联元素,默认带有一定的间距,间距与文字字体有一定的关系. 因此,基于此原因有一下解决方法 ...
利用flex弹性布局实现图片水平及垂直方向居中
display:flex 是一种布局方式.它即可以应用于容器中,也可以应用于行内元素.是W3C提出的一种新的方案,可以简便.完整.响应式地实现各种页面布局注意:(Flex是Flexible Box的 ...
uniapp解决图片底部留白
使用u-image 组件图片底部会有大概10px的留白在这里插入图片描述我写的是宽度撑满,高度自适应,就出现了上面情况解决方法意思大概就是,垂直底部对齐,想要了解vertical-align的 ...
CSS图片底部默认边距三种解决办法
产生底部边距的原因由于img元素默认为inline元素,而inline元素的vertical-align属性的默认值为baseline文字基线对齐,正好图片底部的留白就是baseline和botto ...
解决图片底部间隙对齐问题就用vertical-align
项目中vertical-aligin可以帮你解决的问题文本框和表单按钮无法对齐问题 input和图片无法对齐问题 div中的文本框,不能贴顶问题 div不设置高度由img撑开然后img底部有间隙问题 ...

vertical-align的使用及解决图片底部默认空白缝隙问题和图像与文本垂直方向居中对齐

一、vertical-align的使用

二、解决图片底部默认空白缝隙问题

三、文本垂直方向居中对齐

vertical-align的使用及解决图片底部默认空白缝隙问题和图像与文本垂直方向居中对齐相关推荐

最新文章

热门文章