pc端常見佈局---垂直居中佈局 單元素定高
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>常見元素佈局</title>
<style type="text/css">
/* 1、垂直居中佈局 */
/* 1.單個元素垂直居中 高度固定 缺點:用到定位，脫離文檔流*/ .content { position: relative; height: 100px; background: #008000;/* background和height測試更好的觀看效果 */
} .box { height: 50px; position: absolute; top: 0; bottom: 0; margin: auto 0; background: #ff9933; color: #fff; /* background和color測試更好的觀看效果 */ line-height: 50px; /* 文字垂直居中 */
}
</style>
</head>
<body>
<div class="content">
<div class="box"> 高度固定 </div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>常見元素佈局</title>
<style type="text/css">
/* 1、垂直居中佈局 */
/* 2.單個元素垂直居中 高度固定 記得父容器設置了行高，子類要記得重置行高*/ .content { height: 100px; line-height: 100px; background: #008000;/* background測試更好的觀看效果 可忽略*/
} .box { display: inline-block; height: 50px; vertical-align: middle; background: #ff9933; color: #fff;/* background和color測試更好的觀看效果 */ line-height: 50px;/* 文字垂直居中 */
}
</style>
</head>
<body>
<div class="content">
<div class="box"> 高度固定 </div>
</div>
</body>
</html>
效果：css
相關文章
- 1. pc端常見佈局---垂直居中佈局 單元素不定高
- 2. pc端常見佈局---水平居中佈局 單元素不定寬度
- 3. pc端常見佈局---水平居中佈局 單元素定寬
- 4. 不定高元素得水平垂直居中元素得佈局方式
- 5. 垂直居中佈局
- 6. 垂直居中經常使用佈局
- 7. CSS佈局之-水平垂直居中
- 8. flex佈局水平垂直居中
- 9. css經典佈局系列一——垂直居中佈局
- 10. css垂直居中佈局總結
- 更多相關文章...
- • ASP.NET Web Pages - 頁面佈局 - ASP.NET 教程
- • ASP.NET MVC - 樣式和佈局 - ASP.NET 教程
- • 常用的分佈式事務解決方案
- • JDK13 GA發佈：5大特性解讀
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. pc端常見佈局---垂直居中佈局 單元素不定高
- 2. pc端常見佈局---水平居中佈局 單元素不定寬度
- 3. pc端常見佈局---水平居中佈局 單元素定寬
- 4. 不定高元素得水平垂直居中元素得佈局方式
- 5. 垂直居中佈局
- 6. 垂直居中經常使用佈局
- 7. CSS佈局之-水平垂直居中
- 8. flex佈局水平垂直居中
- 9. css經典佈局系列一——垂直居中佈局
- 10. css垂直居中佈局總結