pc端常見佈局---水平居中佈局 單元素不定寬度
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>常見元素佈局</title>
<style type="text/css">
/* 1、水平居中佈局 */
/* 1.單個元素水平居中 寬度不固定 缺點：須要涉及到父類的樣式*/ .content { text-align: center;
} .box { display: inline-block; color: #fff; background: #0000FF;
}
</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.單個元素水平居中 寬度不固定 缺點：設置爲表格元素，內部元素的佈局有可能受到影響*/ .box { display: table; margin: 0 auto; background: #ff9933; color: #fff; /* background和color測試更好的觀看效果 */
}
</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、水平居中佈局 */
/* 3.單個元素水平居中 寬度不固定 缺點:transform,兼容性較差*/ .content { position: relative;
} .box { position: absolute; left: 50%; transform: translateX(-50%); background: #ff9933; color: #fff; /* background和color測試更好的觀看效果 */
}
</style>
</head>
<body>
<div class="content">
<div class="box"> 寬度不固定 </div>
</div>
</body>
</html>
效果：css
相關文章
- 1. pc端常見佈局---水平居中佈局 單元素定寬
- 2. pc端常見佈局---垂直居中佈局 單元素不定高
- 3. pc端常見佈局---垂直居中佈局 單元素定高
- 4. CSS佈局之水平居中佈局
- 5. 不定高元素得水平垂直居中元素得佈局方式
- 6. CSS佈局解決方案——居中佈局（水平居中）
- 7. CSS佈局之-水平垂直居中
- 8. 佈局總結-水平居中佈局的實現
- 9. flex佈局水平垂直居中
- 10. CSS：佈局 - 水平垂直居中
- 更多相關文章...
- • ASP.NET Web Pages - 頁面佈局 - ASP.NET 教程
- • ASP.NET MVC - 樣式和佈局 - ASP.NET 教程
- • 常用的分佈式事務解決方案
- • JDK13 GA發佈：5大特性解讀
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. python的安裝和Hello，World編寫
- 2. 重磅解讀：K8s Cluster Autoscaler模塊及對應華爲雲插件Deep Dive
- 3. 鴻蒙學習筆記2（永不斷更）
- 4. static關鍵字 和構造代碼塊
- 5. JVM筆記
- 6. 無法啓動 C/C++ 語言服務器。IntelliSense 功能將被禁用。錯誤: Missing binary at c:\Users\MSI-NB\.vscode\extensions\ms-vsc
- 7. 【Hive】Hive返回碼狀態含義
- 8. Java樹形結構遞歸（以時間換空間）和非遞歸（以空間換時間）
- 9. 數據預處理---缺失值
- 10. 都要2021年了，現代C++有什麼值得我們學習的？
歡迎關注本站公眾號,獲取更多信息
相關文章