標籤：style class java ext color width
一丶margin:0 auto;
試用最多的方法，簡單實用。
二丶vertical-align:middle;
只適用於內嵌元素，比如說一個div中有一個圖片和文字，要讓圖片和文字中線對齊。
<style type="text/css">
.fd{
width: 500px;
height: 200px;
}
img{
vertical-align:middle;
}
</style><div class="fd">
<img src="頁面/images/1.png" />
<span>關注前端，關注使用者體驗-冀</span>
</div>
三丶position:relative;
通過給父元素設定浮動float，再設定父元素的position屬性為relative和left：50%;子項目設定position：relative和left：-50%來實現水平置中。這個好處是可以保留區塊層級元素仍然是以display：block的形式顯示，不會添加無意義的標籤，不添加嵌套深度。確點是設定了position：relative;帶來了一些副作用。下面是第三種方法的執行個體代碼，放到body標籤裡面就可以了。
<div style=”width:400px;height:300px;background:#333;”>
<ul style=”margin:0 auto;float:left; position:relative; left:50%;list-style:none; padding:0;”>
<li style=”position:relative; left:-50%;float:left”>OKOKOKOKKOOKK</li>
</ul>
</div>
四丶margin-left;
通過margin的left來設定置中，需要多嘗試參數值。
五丶padding-left;
通過padding的left來設定置中，需要多嘗試參數值。
六丶text-align:center:
首先在父級元素定義text-align: center;這個的意思就是在父級元素內的文字內容置中；
七丶center(圖片置中)
body{backgroud: url(“1.png”) #FFF no-repeat center;}
關鍵就是最後的center,這個參數定義圖片的位置。還可以寫成“top left”(左上方)或者"bottom right"等，也可以直接寫數值"50 30"
八丶JS控制置中
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
<title></title>
<style type="text/css"></style>
</head>
<body>
<div style="border: solid; width: 100%; height: 100px">
說明:js根據頁面大小變化設定div左右置中, 要應用js代碼，要設定position：absolute
<p>關注前端，關注使用者體驗-冀</p>
</div>
<div id="fd"style="border: solid; background-color: red; width: 100px; position: absolute">
此為置中的div
</div>
<script type="text/javascript">
var fd = document.getElementById("fd");
var fd_resize = function() {
fd.style.left = (document.body.clientWidth - 100) / 2;//100為mydiv的寬度
fd.style.height = document.body.clientHeight / 2;
}
fd_resize();
window.onresize = fd_resize;
</script>
</body>
</html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
