text-align和line-height何时用
- 当标签中是文本样式和图片的时候他们才起作用。
<!-- <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>嵌套盒子</title>
<style>
*{
padding:0px;
margin: 0px;
}
.father{
width: 400px;
height: 400px;
background-color: red;
margin: 200px auto;
line-height:
}
.son{
width: 200px;
height: 200px;
background:pink;
}
/*.father>.son>.par{
width: 100px
height: 100px;
background: purple;
}*/
</style>
</head>
<body>
<div class="father">
<div class="son">
<div class="par"></div>
</div>
</div>
</body>
</html> -->
<!-- <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
padding: 0px;
margin: 0px;
}
div{
width: 500px;
height: 300px;
border: 1px solid #000;
text-align: center;
margin:100px auto;
line-height: 300px;
}
span{
display: inline-block;s
text-align: center;
}
</style>
</head>
<body>
<div> 小长假亲·牛仔裤不能创建·</div>
<span>撒酒疯并不·什么身份东</span>
</body>
</html> -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
padding: 0px;
margin:0px;
}
div{
width: 100px;
height: 100px;
border: 1px solid #000;
text-align: center;
line-height:100px;
/*margin: 100px auto;*/
}
span{
width: 300px;
height: 300px;
border: 1px solid #000;
display: inline-block;
text-align: center;
/*margin: 100px auto;*/
line-height: 100px;
}
a{
display: inline-block;
width:100px;
height: 100px;
border: 1px solid #000;
text-align: center;
line-height: 100px;
}
span>img{
/*vertical-align: baseline;*/
/*vertical-align: top;*/
vertical-align: text-top;
/*vertical-align: text-bottom;*/
}
</style>
</head>
<body>
<div>厦门长宽</div>
<span>是的v空间哦i节目<img src="bg-sun.png" alt=""></span>
<a href="#"> 你但是可能</a>
</body>
</html>
图片和文字对齐方式用
vertaical-align:baseline;
vertacial-align；top；
vertacial-align；text-top；
vertacial-align；middle；
vertacial-align；text-bottom；