浅谈css中vertical-align和line-height的用法

ttx9n · 发表于 2016-7-27 10:52:30

下面小编就为大家带来一篇浅谈css中vertical-align和line-height的用法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧，祝大家游戏愉快哦

（1）、将一个图片放入一个div块中，div块背景颜色设置为aquamarine。将会发现图片与div块下边沿有一定间隙。

实例：

201607271055465.jpg

代码如下：

XML/HTML Code复制内容到剪贴板

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css中vertical-align和line-height的用法</title>
<style>
*{
margin: 0px;
padding: 0px;
}
div{
background-color: aquamarine;
}
img {
width: 300px;
}
</style>
</head>
<body>
<div>
<img src="./131796750659172.jpg" alt="picture">
</div>
</body>
</html>

（2）、在div块的图片后面放入一个span标签，内容为xxxx!,会发现span标签内的元素与图片是在底线对其的，当给span加一个背景时，可以看到图片底部是与字母x底部对齐的。

实例：
　　

201607271055468.jpg

实例：放大之后可以很明显的看出来！

201607271055469.jpg

代码如下：

XML/HTML Code复制内容到剪贴板

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css中vertical-align和line-height的用法</title>
<style>
*{
margin: 0px;
padding: 0px;
}
div{
background-color: aquamarine;
}
img{
width: 300px;
}
span{
background-color: azure;
}
</style>
</head>
<body>
<div>
<img src="./131796750659172.jpg" alt="picture">
<span>xxxxx!</span>
</div>
</body>
</html>

为什么会出现这种现象呢？

答：原因是行内元素默认都受vertical-align（垂直对齐方式）和line-height（行高）的影响，而vertical-align默认的对齐方式是baseline,即基线对齐。这个基线就是span标签里的字母X的下边沿，故图片底部是与字母底部相对齐的（不是与span标签的背景对齐）。又因为字母本身有line-height（行高）值，所以span标签加上背景后比字母要高一些。

解决方法：（四种方法任意一种都可解决该问题）

（1）、将整个div内的font-size设置为0；

（2）、将图片img变为块级元素，即设置其为display:block;

（3）、给div设置一个行高（值尽量小些），设置为line-height:5px;

（4）、设置图片img垂直对齐方式vertical-align,值为top/middle/bottom任意一个都可以（为了覆盖默认的值baseline）;

效果如下：

2016072710554610.jpg

完整代码如下：

XML/HTML Code复制内容到剪贴板

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css中vertical-align和line-height的用法</title>
<style>
*{
margin: 0px;
padding: 0px;
}
div{
background-color: aquamarine;
/*line-height: 5px;*/
/*font-size: 0;*/
}
img{
width: 300px;
/*display: block;*/
vertical-align: bottom;
}
span{
background-color: azure;
}
</style>
</head>
<body>
<div>
<img src="./131796750659172.jpg" alt="picture">
<span>xxxxx!</span>
</div>
</body>
</html>

2、图片垂直居中的问题

在div和img中添加以下属性及属性值即可实现图片在div块中的垂直居中。

XML/HTML Code复制内容到剪贴板

<style type="text/css">
...
div{
line-height: 500px;
font-size: 0px;
}
img{
vertical-align: middle;
}
...
<style>

2016072710554611.jpg

代码如下：

XML/HTML Code复制内容到剪贴板

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css中vertical-align和line-height的用法</title>
<style>
*{
margin: 0px;
padding: 0px;
}
div{
background-color: aquamarine;
line-height: 500px;
font-size: 0px;
}
img{
width: 300px;
vertical-align: middle;
}
span{
background-color: azure;
}
</style>
</head>
<body>
<div>
<img src="./131796750659172.jpg" alt="picture">
<span>xxxxx!</span>
</div>
</body>
</html>

以上这篇浅谈css中vertical-align和line-height的用法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。

原文地址：http://www.cnblogs.com/gaotenglong/archive/2016/07/26/5708793.html

3t0ukmu · 发表于 2022-8-15 03:22:07

快更新啊，我擦

kwzc65wdj · 发表于 2022-8-19 09:10:06

终于找到了，我擦

4r8oiin60 · 发表于 2022-12-28 11:16:42

哟哟哟哟哟以偶

v3sfsi · 发表于 2023-1-28 03:17:54

有什么好的服务器

3mfwk4yf · 发表于 2023-4-25 07:25:48

66666666666

醉梦娱乐网 · 发表于 2023-8-28 20:47:32

额头额定法国队是范德萨

7jbiiz · 发表于 2023-9-18 19:14:58

啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦

qwe520 · 发表于 2023-11-11 02:06:14

管灌灌灌灌灌灌灌灌灌灌

黑白键 · 发表于 2024-2-21 11:57:46

天天源码社区www.tiantianym.com

账号		自动登录	找回密码
密码			立即注册

[CSS] 浅谈css中vertical-align和line-height的用法

相关帖子