自拍偷在线精品自拍偷,亚洲欧美中文日韩v在线观看不卡

一篇文章帶你了解CSS對齊方式

作者：Python進階學(xué)習(xí)交流
開發(fā) 前端
本文基于Html基礎(chǔ)，主要介紹了Html中對齊的方式，對于對齊中的標(biāo)簽做了詳細的講解，用豐富的案例 ，代碼效果圖的展示，幫助大家更好理解 。

[[350213]]

一、居中

1. 居中對齊元素

將塊元素水平居中對齊(像<div>) , 使用 margin: auto;設(shè)置元素的寬度將阻止它伸展到容器的邊緣。

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

這個div是居中的。

 

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

 

一篇文章帶你了解CSS對齊方式

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

2. 居中對齊文本

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

這些文本是居中的。

 

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

 

一篇文章帶你了解CSS對齊方式

3. 居中圖片

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

 

  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. } 

注意：

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

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

還有IE8和早期版本有一些問題, 當(dāng)使用 position. 如果容器元素有一個指定的寬度 (例如： <div class="container">) , 并且沒有設(shè)置!DOCTYPE, IE8 和早期版本將添加 17px 外邊距到右邊. 這似乎是一條為滾動條預(yù)留空間. 因此，總是聲明 !DOCTYPE 當(dāng)使用 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. } 

提示：

當(dāng)將元素使用浮動對齊時，總是為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屬性實現(xiàn)元素的水平和垂直居中:</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對齊方式

四、總結(jié)

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

最后，希望可以幫助大家更好的學(xué)習(xí)CSS3。

 

 

責(zé)任編輯：未麗燕 來源： 今日頭條
CSS對齊文本
相關(guān)推薦

2021-05-31 09:30:36

Css前端CSS 特效

2021-04-07 06:11:37

Css前端CSS定位知識

2021-01-25 05:39:54

Css前端Border

2023-05-12 08:19:12

Netty程序框架

2021-06-30 00:20:12

Hangfire.NET平臺

2020-11-17 11:10:21

CSS選擇器HTML

2020-12-18 05:40:37

CSS clearHtml

2020-11-27 08:51:29

CSSOpacity透明度

2023-07-30 15:18:54

JavaScript屬性

2023-05-08 08:21:15

JavaNIO編程

2021-01-26 23:46:32

JavaScript數(shù)據(jù)結(jié)構(gòu)前端

2021-03-09 14:04:01

JavaScriptCookie數(shù)據(jù)

2021-06-24 09:05:08

JavaScript日期前端

2021-09-27 09:18:30

ListIterato接口方法

2023-09-06 14:57:46

JavaScript編程語言

2024-01-30 13:47:45

2024-04-19 14:23:52

SwitchJavaScript開發(fā)

2020-12-08 08:09:49

SVG圖標(biāo)Web

2021-03-05 18:04:15

JavaScript循環(huán)代碼

2021-05-18 08:30:42

JavaScript 前端JavaScript時
點贊
收藏

51CTO技術(shù)棧公眾號