当前位置：主页 > 查看内容

一篇文章带你了解CSS对齐方式

发布时间：2021-10-26 00:00| 有 位朋友查看

简介：一、居中 1. 居中对齐元素 将块元素水平居中对齐(像div) , 使用 margin: auto;设置元素的宽度将阻止它伸展到容器的边缘。 然后元素将占用指定的宽度，剩下的空间将平分在两个边距之间： 这个div是居中的。 .center{ margin:auto; width:50%; border:3pxsolid……

一、居中

1. 居中对齐元素

将块元素水平居中对齐(像<div>) , 使用 margin: auto;设置元素的宽度将阻止它伸展到容器的边缘。

然后元素将占用指定的宽度，剩下的空间将平分在两个边距之间：

这个div是居中的。

  1. .center { 
  2.     margin: auto; 
  3.     width: 50%; 
  4.     border: 3px solid green; 
  5.     padding: 10px; 
  6. } 
一篇文章带你了解CSS对齐方式

注意：如果没有设置宽度属性，则居中对齐没有效果 (或者设置到100%).

2. 居中对齐文本

将元素内部的文本居中, 使用text-align: center;

这些文本是居中的。

  1. .center { 
  2.     text-align: center; 
  3.     border: 3px solid green; 
  4. } 
一篇文章带你了解CSS对齐方式

3. 居中图片

居中图片, 使用 margin: auto; 并且设置为块级元素:

  1. img { 
  2.     display: block; 
  3.     margin: auto; 
  4.     width: 40%; 
  5. } 
一篇文章带你了解CSS对齐方式

二、左右

HTML代码：

  1. <html lang="en"> 
  2. <head> 
  3.   <meta charset="UTF-8"> 
  4.   <title>编程字典</title> 
  5.  
  6. </head> 
  7. <body> 
  8.  
  9.   <h2>右对齐</h2> 
  10.   <p>如何正确定位元素与位置属性的一个例子:</p> 
  11.  
  12.   <div class="right"> 
  13.     <p>在我年轻而脆弱的岁月里，父亲给了我一些我一直以来一直在思考的建议.</p> 
  14.   </div> 
  15.  
  16. </body> 
  17. </html> 

1. 左右对齐 - 使用 position

对齐元素的一种方法是使用 position: absolute;

在我年轻而脆弱的岁月里，父亲给了我一些我一直以来一直在思考的建议。

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

注意：

绝对定位元素从正常流中移除，并且可以重叠元素。

当使用 position对齐元素时, 总是定义 margin 和 padding 为 元素. 这是为了避免不同浏览器的视觉差异。

还有IE8和早期版本有一些问题, 当使用 position. 如果容器元素有一个指定的宽度 (例如： <div class="container">) , 并且没有设置!DOCTYPE, IE8 和早期版本将添加 17px 外边距到右边. 这似乎是一条为滚动条预留空间. 因此，总是声明 !DOCTYPE 当使用 position时:

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

2. 左右对齐 - 使用 float

对齐元素的另一种方法是使用 float 属性:

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

提示：

当将元素使用浮动对齐时，总是为body元素定义边距和填充。这是为了避免不同浏览器的视觉差异。

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

效果图：

一篇文章带你了解CSS对齐方式

三、垂直居中，水平居中

HTML代码：

  1. <html lang="en"> 
  2. <head> 
  3.   <meta charset="UTF-8"> 
  4.   <title>编程字典</title> 
  5.  
  6. </head> 
  7. <body> 
  8.  
  9.   <h2>居中</h2> 
  10.   <p>在这个实例中, 
  11.      我们使用定位和transform属性实现元素的水平和垂直居中:</p> 
  12.  
  13.   <div class="center"> 
  14.     <!-- <p>我是垂直居中的.</p> --> 
  15.     <p>我水平垂直居中.</p> 
  16.      
  17.   </div> 
  18.  
  19.   <p>注意: transform属性不支持IE8和更早的版本.</p> 
  20.  
  21. </body> 
  22. </html> 
一篇文章带你了解CSS对齐方式

1. 使用 padding

有许多方法来中心垂直CSS元素. 一个简单的解决方案是使用顶部和底部 padding:

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

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

垂直居中

  1. .center { 
  2.     padding: 70px 0; 
  3.     border: 3px solid green; 
  4.     text-align: center; 
  5. } 
一篇文章带你了解CSS对齐方式

2. 使用 line-height

另一个技巧是使用 line-height 属性值等于 height 属性值.

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

3. 使用 position & transform

如果padding和line-height不可选，第三种解决方案是使用定位和变换属性：

  1. .center { 
  2.     height: 200px; 
  3.     position: relative; 
  4.     border: 3px solid green; 
  5. } 
  6.  
  7. .center p { 
  8.     margin: 0; 
  9.     position: absolute; 
  10.     top: 50%; 
  11.     left: 50%; 
  12.     transform: translate(-50%, -50%); 
  13. } 
一篇文章带你了解CSS对齐方式

四、总结

本文基于Html基础，主要介绍了Html中对齐的方式，对于对齐中的标签做了详细的讲解，用丰富的案例 ，代码效果图的展示，帮助大家更好理解 。

最后，希望可以帮助大家更好的学习CSS3。


本文转载自网络，原文链接：https://www.toutiao.com/a6890765639334658564/
本站部分内容转载于网络，版权归原作者所有，转载之目的在于传播更多优秀技术内容，如有侵权请联系QQ/微信：153890879删除，谢谢！
上一篇：Java数组转List的三种方式及对比 下一篇：没有了

推荐图文

  • 周排行
  • 月排行
  • 总排行

随机推荐