这期内容当中小编将会给大家带来有关vertical-align和line-height怎么在css中使用,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。
-
<!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底部对齐的。
实例:
实例:放大之后可以很明显的看出来!
代码如下:
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);
效果如下:
完整代码如下:
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>
代码如下:
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>
上述就是小编为大家分享的vertical-align和line-height怎么在css中使用了,如果刚好有类似的疑惑,不妨参照上述分析进行理解。如果想知道更多相关知识,欢迎关注本站行业资讯频道。