日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

RELATEED CONSULTING
相關咨詢
選擇下列產(chǎn)品馬上在線溝通
服務時間：8:30-17:00
你可能遇到了下面的問題
關閉右側工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
一篇文章帶你了解CSS對齊方式

一、居中

1. 居中對齊元素

將塊元素水平居中對齊(像

) , 使用 margin: auto;設置元素的寬度將阻止它伸展到容器的邊緣。

然后元素將占用指定的寬度，剩下的空間將平分在兩個邊距之間：

這個div是居中的。

 
 
 
 
      
  
  
  
  1. .center { 
    2.   
  
  
  
  2.     margin: auto; 
    3.   
  
  
  
  3.     width: 50%; 
    4.   
  
  
  
  4.     border: 3px solid green; 
    5.   
  
  
  
  5.     padding: 10px; 
    6.   
  
  
  
  6. } 
    7.

注意：如果沒有設置寬度屬性，則居中對齊沒有效果 (或者設置到100%).

2. 居中對齊文本

將元素內(nèi)部的文本居中, 使用text-align: center;

這些文本是居中的。

 
 
 
 
      
  
  
  
  1. .center { 
    2.   
  
  
  
  2.     text-align: center; 
    3.   
  
  
  
  3.     border: 3px solid green; 
    4.   
  
  
  
  4. } 
    5.

3. 居中圖片

居中圖片, 使用 margin: auto; 并且設置為塊級元素:

 
 
 
 
      
  
  
  
  1. img { 
    2.   
  
  
  
  2.     display: block; 
    3.   
  
  
  
  3.     margin: auto; 
    4.   
  
  
  
  4.     width: 40%; 
    5.   
  
  
  
  5. } 
    6.

二、左右

HTML代碼：

 
 
 
 
      
  
  
  
  1.  
    2.   
  
  
  
  2.  
    3.   
  
  
  
  3.    
    4.   
  
  
  
  4.   編程字典 
    5.   
  
  
  
  5.  
    6.   
  
  
  
  6.  
    7.   
  
  
  
  7.  
    8.   
  
  
  
  8.  
    9.   
  
  
  
  9.   
    右對齊
     
    10.   
  
  
  
  10.   
    如何正確定位元素與位置屬性的一個例子:
     
    11.   
  
  
  
  11.  
    12.   
  
  
  
  12.    
    13.   
  
  
  
  13.     
    在我年輕而脆弱的歲月里，父親給了我一些我一直以來一直在思考的建議.
     
    14.   
  
  
  
  14.   
 
  •  
  •  
  •  

    • 1. 左右對齊 - 使用 position

    對齊元素的一種方法是使用 position: absolute;

    在我年輕而脆弱的歲月里，父親給了我一些我一直以來一直在思考的建議。

     
 
 
 
        
  
  
  
    1. .right { 
      2.   
  
  
  
    2.     position: absolute; 
      3.   
  
  
  
    3.     right: 0px; 
      4.   
  
  
  
    4.     width: 300px; 
      5.   
  
  
  
    5.     border: 3px solid #73AD21; 
      6.   
  
  
  
    6.     padding: 10px; 
      7.   
  
  
  
    7. } 
      8.

    注意：

    絕對定位元素從正常流中移除，并且可以重疊元素。

    當使用 position對齊元素時, 總是定義 margin 和 padding 為 元素. 這是為了避免不同瀏覽器的視覺差異。

    還有IE8和早期版本有一些問題, 當使用 position. 如果容器元素有一個指定的寬度 (例如：

    ) , 并且沒有設置!DOCTYPE, IE8 和早期版本將添加 17px 外邊距到右邊. 這似乎是一條為滾動條預留空間. 因此，總是聲明 !DOCTYPE 當使用 position時:

      
 
 
 
         
  
  
  
    1. body { 
      2.    
  
  
  
    2.     margin: 0; 
      3.    
  
  
  
    3.     padding: 0; 
      4.    
  
  
  
    4. } 
      5.    
  
  
  
    5.  
      6.    
  
  
  
    6. .container { 
      7.    
  
  
  
    7.     position: relative; 
      8.    
  
  
  
    8.     width: 100%; 
      9.    
  
  
  
    9. } 
      10.    
  
  
  
    10.  
      11.    
  
  
  
    11. .right { 
      12.    
  
  
  
    12.     position: absolute; 
      13.    
  
  
  
    13.     right: 0px; 
      14.    
  
  
  
    14.     width: 300px; 
      15.    
  
  
  
    15.     background-color: #b0e0e6; 
      16.    
  
  
  
    16. } 
      17.

    2. 左右對齊 - 使用 float

    對齊元素的另一種方法是使用 float 屬性:

      
 
 
 
         
  
  
  
    1. .right { 
      2.    
  
  
  
    2.     float: right; 
      3.    
  
  
  
    3.     width: 300px; 
      4.    
  
  
  
    4.     border: 3px solid #73AD21; 
      5.    
  
  
  
    5.     padding: 10px; 
      6.    
  
  
  
    6. } 
      7.

    提示：

    當將元素使用浮動對齊時，總是為body元素定義邊距和填充。這是為了避免不同瀏覽器的視覺差異。

      
 
 
 
         
  
  
  
    1. body { 
      2.    
  
  
  
    2.     margin: 0; 
      3.    
  
  
  
    3.     padding: 0; 
      4.    
  
  
  
    4. } 
      5.    
  
  
  
    5.  
      6.    
  
  
  
    6. .right { 
      7.    
  
  
  
    7.     float: right; 
      8.    
  
  
  
    8.     width: 300px; 
      9.    
  
  
  
    9.     background-color: #b0e0e6; 
      10.    
  
  
  
    10. } 
      11.

    效果圖：

    三、垂直居中，水平居中

    HTML代碼：

      
 
 
 
         
  
  
  
    1.  
      2.    
  
  
  
    2.  
      3.    
  
  
  
    3.    
      4.    
  
  
  
    4.   編程字典 
      5.    
  
  
  
    5.  
      6.    
  
  
  
    6.  
      7.    
  
  
  
    7.  
      8.    
  
  
  
    8.  
      9.    
  
  
  
    9.   
      居中
       
      10.    
  
  
  
    10.   
      在這個實例中, 
      11.    
  
  
  
    11.      我們使用定位和transform屬性實現(xiàn)元素的水平和垂直居中:
       
      12.    
  
  
  
    12.  
      13.    
  
  
  
    13.    
      14.    
  
  
  
    14.      
      15.    
  
  
  
    15.     
      我水平垂直居中.
       
      16.    
  
  
  
    16.      
      17.    
  
  
  
    17.   
     
  •  
  •   

    注意: transform屬性不支持IE8和更早的版本.

     
  •  
  •  
  •  

    • 1. 使用 padding

    有許多方法來中心垂直CSS元素. 一個簡單的解決方案是使用頂部和底部 padding:

      
 
 
 
         
  
  
  
    1. .center { 
      2.    
  
  
  
    2.     padding: 70px 0; 
      3.    
  
  
  
    3.     border: 3px solid green; 
      4.    
  
  
  
    4. } 
      5.

    水平和垂直居中, 使用 padding 和 text-align: center:

    垂直居中

      
 
 
 
         
  
  
  
    1. .center { 
      2.    
  
  
  
    2.     padding: 70px 0; 
      3.    
  
  
  
    3.     border: 3px solid green; 
      4.    
  
  
  
    4.     text-align: center; 
      5.    
  
  
  
    5. } 
      6.

    2. 使用 line-height

    另一個技巧是使用 line-height 屬性值等于 height 屬性值.

      
 
 
 
         
  
  
  
    1. .center { 
      2.    
  
  
  
    2.     line-height: 200px; 
      3.    
  
  
  
    3.     height: 200px; 
      4.    
  
  
  
    4.     border: 3px solid green; 
      5.    
  
  
  
    5.     text-align: center; 
      6.    
  
  
  
    6. } 
      7.    
  
  
  
    7.  
      8.    
  
  
  
    8. /* If the text has multiple lines, add the following: */ 
      9.    
  
  
  
    9. .center p { 
      10.    
  
  
  
    10.     line-height: 1.5; 
      11.    
  
  
  
    11.     display: inline-block; 
      12.    
  
  
  
    12.     vertical-align: middle; 
      13.    
  
  
  
    13. } 
      14.

    3. 使用 position & transform

    如果padding和line-height不可選，第三種解決方案是使用定位和變換屬性：

      
 
 
 
         
  
  
  
    1. .center { 
      2.    
  
  
  
    2.     height: 200px; 
      3.    
  
  
  
    3.     position: relative; 
      4.    
  
  
  
    4.     border: 3px solid green; 
      5.    
  
  
  
    5. } 
      6.    
  
  
  
    6.  
      7.    
  
  
  
    7. .center p { 
      8.    
  
  
  
    8.     margin: 0; 
      9.    
  
  
  
    9.     position: absolute; 
      10.    
  
  
  
    10.     top: 50%; 
      11.    
  
  
  
    11.     left: 50%; 
      12.    
  
  
  
    12.     transform: translate(-50%, -50%); 
      13.    
  
  
  
    13. } 
      14.

    四、總結

    本文基于Html基礎，主要介紹了Html中對齊的方式，對于對齊中的標簽做了詳細的講解，用豐富的案例 ，代碼效果圖的展示，幫助大家更好理解 。

    最后，希望可以幫助大家更好的學習CSS3。


    文章題目：一篇文章帶你了解CSS對齊方式
    標題來源：http://www.dlmjj.cn/article/dhehcej.html