<!DOCTYPE html>
<html>
<head>
<title>盒子水平居中的方法</title>
<style type="text/css">
/*
1.使用margin: 0 auto;
2.使用margin左右邊距
3.先讓盒子左右邊緣和父盒子垂直的中心線重疊，然後再把盒子往回移動自身寬度的一半
4.把盒子轉換成行內塊，然後使用text-align屬性是盒子水平居中
*/
/*1*/
/*.m1{
width: 300px;
height: 300px;
border: 1px solid red;
margin: 0 auto;
}
.m2{
width: 200px;
height: 200px;
border: 1px solid blue;
margin: 0 auto;
}*/
/*2 只是針對有具體寬度值的元素進行設定*/
/*.m1{
width: 300px;
height: 300px;
border: 1px solid red;
}
.m2{
width: 200px;
height: 200px;
border: 1px solid blue;
margin-left: 49px;
}*/
/*3*/
/*.m1{
width: 300px;
height: 300px;
border: 1px solid red;
position: relative;
}
.m2{
width: 200px;
height: 200px;
border: 1px solid blue;
position: absolute;
left: 150px;
margin-left: -101px;
}*/
/*4*/
.m1{
width: 300px;
height: 300px;
border: 1px solid red;
text-align: center;
}
.m2{
width: 200px;
height: 200px;
border: 1px solid blue;
display: inline-block;
}
</style>
</head>
<body>
<div class="m1">
<div class="m2"></div>
</div>
</body>
</html>
div盒子水平居中的方法
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章