Web前端開發，自學筆記整理
垂直居中
1.垂直居中問題-1
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.info1 {
width: 300px;
height: 300px;
background: lightblue;
color: brown;
text-align: center;
line-height: 300px;
}
.info2 {
width: 300px;
height: 300px;
background: lightgreen;
color: yellow;
text-align: center;
line-height: 300px;
}
.info3 {
width: 300px;
height: 300px;
background: lightgreen;
color: yellow;
/*僅支持行內元素、行內塊元素*/
/*text-align: center;*/
overflow: hidden;
}
.view {
width: 100px;
height: 100px;
background: lightcoral;
/*塊狀元素*/
margin: 100px;
}
</style>
</head>
<body>
<p class="info1">
元素類型
</p>
<br />
<div class="info2">
<a href="#">百度一下</a>
</div>
<br />
<div class="info3">
<div class="view"></div>
</div>
</body>
</html>2.垂直居中問題-2
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box {
width: 300px;
height: 300px;
background: lightblue;
text-align: center;
}
/*300-105 = 195 195/2=97.5*/
.box img {
/*margin-top:97.5px ;*/
}
</style>
</head>
<body>
<div class=" box">
<img src="../04-臥龍控股/img/bg.png" />
</div>
</body>
</html>3.垂直居中設置技巧
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
p {
text-align: center;
}
p img {
vertical-align: middle
}
/*
.box是外層盒子
img是要設置居中的內容
span作爲參考對象
行內塊元素都支持text-align、vertical-align
1. img和span都設置爲行內塊元素 display: inline-block;
2. img和span垂直居中 vertical-align: middle;
3. .box設置水平位置居中 text-align: center;
4. span的高度和父元素一致 height: 100%;
5. span只是作爲參考，不需要顯示 width: 0;
*/
.box {
width: 400px;
height: 400px;
background: lightblue;
text-align: center;
}
.box span {
/*width: 5px;*/
width: 0;
/*height: 300px;*/
height: 100%;
background: lightgreen;
display: inline-block;
vertical-align: middle;
}
.box img {
display: inline-block;
vertical-align: middle;
}
</style>
</head>
<body>
<!--
原理：inline-block支持text-align和vertical-align
-->
<p>
段落標籤
<img src="../04-臥龍控股/img/bg.png"
</p>
<div class="box">
<!--參考對象-->
<span></span>
<!--顯示內容-->
<img src="../04-臥龍控股/img/bg.png" />
</div>
</body>
</html>