一篇文章带你了解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. 居中对齐文本

将元素内部的文本居中, 使用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属性实现元素的水平和垂直居中:
       
      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.shufengxianlan.com/qtweb/news23/392173.html

    网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

    广告

    声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

    猜你还喜欢下面的内容

    做网站知识

    同城分类信息

    高端网站建设　　 　防护网厂　　 　网站改版　　 　雅安托管服务器　　 　成都app制作　　 　响应式网站设计　　 　小谭建站　　 　网站排名　　 　四川盐亭做网站　　 　网络推广外包　　 　搜索引擎优化　　 　网站建设公司　　 　广汉锦华　　 　成都门窗定制　　 　广安网站建设　　 　绵阳服务器托管　　 　德阳服务器托管　　 　重庆app软件开发　　 　雪茄烟　　 　成都SEO优化