vertical-align
值:
top 顶部对齐
middle 中间对齐
baseline 基线对齐 (以x的小写字母的底边线是基线)
bottom 底部对齐
vertical-align 只能使用在行元素或者内联元素(inline-block)
不能使用在块元素上
使用方式:
1.如果父元素的高度由其中一个子元素撑开,那么给其他元素设置
vertical-align:middle 就可以实现居中效果
2.如果父元素高度固定,不适用子元素撑开高度,则可以通过 添加
一个自定义标签,该标签的高度为父元素的高度,然后设置
vertical-align: middle;和dispiay:inline-block 就可以
使父元素的内容居中
vertical-align 也可以解决img标签的缝隙
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>透明度</title>
<style>
*{
margin: 0;
padding: 0;
}
.wp{
width: 200px;
height: 200px;
background: #04be02;
border: 1px #f00 solid;
/* 设置透明 */
opacity: 0.5;
}
.son{
width: 100px;
height: 100px;
background-color: #F00;
position: absolute;
left: 300PX;
top: 0;
}
.line,.line1 {
border: 1px #f00 solid;
width: 80%;
margin: 20px auto;
}
.line1{
height: 200px;
}
.line span{
display: inline-block;
border: 1px #f00 solid;
/* 垂直居中 */
vertical-align: middle;
/* 底部对齐 */
/* vertical-align: bottom; */
/* vertical-align: baseline; */
vertical-align: middle;
}
.fir{
height: 100px;
line-height: 100px;
}
.fr{
height: 100px;
line-height: 100px;
}
.line1 span{
border: 1px #f00 solid;
}
.case{
height: 100%;
display: inline-block;
vertical-align: middle;
width: 0;
}
.img-wp{
width: 300px;
border: 1px #f00 solid;
}
.img-wp img{
width: 100%;
height: 200px;
vertical-align: middle;
}
</style>
</head>
<body>
<!--
transparent 透明色
opacity: 设置元素的透明度,可以使整个元素透明,包含元素
里面所有的内容。( rgba只能设置背景颜色透明。)
取值范围: 0-1 , 0完全透明 1完全不透明
行元素在垂直方向的对齐方式
vertical-align
值:
top 顶部对齐
middle 中间对齐
baseline 基线对齐 (以x的小写字母的底边线是基线)
bottom 底部对齐
vertical-align 只能使用在行元素或者内联元素(inline-block)
不能使用在块元素上
使用方式:
1.如果父元素的高度由其中一个子元素撑开,那么给其他元素设置
vertical-align:middle 就可以实现居中效果
2.如果父元素高度固定,不适用子元素撑开高度,则可以通过 添加
一个自定义标签,该标签的高度为父元素的高度,然后设置
vertical-align: middle;和dispiay:inline-block 就可以
使父元素的内容居中
vertical-align 也可以解决img标签的缝隙
-->
<div class="wp">
独孤伽罗
<div class="son"></div>
</div>
<div class="line">
<div class="fir">杨坚</div>
<span>杨广</span>
<span>秦叔宝</span>
<span>尉迟恭</span>
<span>杨过</span>
</div>
<div class="line1">
<span class="case"></span>
<span >杨坚</span>
<span>杨广</span>
<span>秦叔宝</span>
<span>尉迟恭</span>
<span>杨过</span>
</div>
<div class="img-wp">
<img src="../img/R-C (2).jpg" alt="">
</div>
</body>
</html>