CSS 水平,垂直,居中對齊
使用CSS屬性實現各種對齊,例如左對齊,居中對齊,右對齊,垂直居中對齊等
方法一: 使用float屬性設定左右對齊
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>实例</title> <title>php.cn</title> <style type="text/css"> .divcss5-left{float:left;width:250px;height:50px;border:1px solid #F00} </style> </head> <body> <div class="divcss5-left">此DIV靠左对齐显示</div> </body> </html>
方法二:使用margin屬性進行中心對齊
只需要對要居中對齊的樣式加margin:0 auto。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>实例</title> <title>php.cn</title> <style type="text/css"> .divcss5-cent{margin:0 auto;width:250px;height:50px;border:1px solid #F00} </style> </head> <body> <div class="divcss5-cent">此DIV居中对齐显示</div> </body> </html>
方法三:使用position屬性設定左,右對準##
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>实例</title> <title>php.cn</title> <style type="text/css"> .divcss5-cent { position:absolute; right:0px; width:250px; height:50px; border:1px solid #F00 } </style> </head> <body> <div class="divcss5-cent">此DIV右对齐显示</div> </body> </html>
##使用多屬性實作垂直居中對齊:<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>实例</title>
<title>php.cn</title>
<style type="text/css">
.wrp {
background-color: #b9b9b9;
width: 340px;
height: 260px;
}
.box {
color: white;
background-color: #3e8e41;
width: 200px;
height: 120px;
overflow: auto;
}
.wrp1 { position: relative; }
.box1 {
margin: auto;
position: absolute;
left: 0; right: 0; top: 0; bottom: 0;
}
</style>
<body>
<div class="wrp wrp1">
<div class="box box1">
<h3>完全居中:</h3>
<h3>利用css定位规则,设置左右、上下方向定位为0,margin为auto</h3>
</div>
</div>
</body>
</html>