pc端常見布局---水平居中布局 單元素定寬和不定寬度
阿新 • • 發佈：2019-02-14
form itl 常見 type 圖片 pla 分享 -s png
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>常見元素布局</title>
<style type="text/css">
/* 一、水平居中布局 */
/* 1.單個元素水平居中 寬度不固定 缺點：需要涉及到父類的樣式*/
.content {
text-align: center
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>常見元素布局</title>
<style type="text/css">
/* 一、水平居中布局 */
/* 2.單個元素水平居中 寬度不固定 缺點：設置為表格元素，內部元素的布局有可能受到影響
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>常見元素布局</title>
<style type="text/css">
/* 一、水平居中布局 */
/* 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>
效果：
pc端常見布局---水平居中布局 單元素定寬和不定寬度