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>

繼續學習

新建檔案

<!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>

重置程式碼

自動運行

提交

預覽 Clear