溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

如何理解CSS對(duì)齊方式

發(fā)布時(shí)間：2021-10-25 15:28:22 來(lái)源：億速云 閱讀：118 作者：iii 欄目：web開發(fā)

本篇內(nèi)容主要講解“如何理解CSS對(duì)齊方式”，感興趣的朋友不妨來(lái)看看。本文介紹的方法操作簡(jiǎn)單快捷，實(shí)用性強(qiáng)。下面就讓小編來(lái)帶大家學(xué)習(xí)“如何理解CSS對(duì)齊方式”吧!

一、居中

1. 居中對(duì)齊元素

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

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

這個(gè)div是居中的。

.center {     margin: auto;     width: 50%;     border: 3px solid green;     padding: 10px; }
如何理解CSS對(duì)齊方式

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

2. 居中對(duì)齊文本

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

這些文本是居中的。

.center {     text-align: center;     border: 3px solid green; }
如何理解CSS對(duì)齊方式

3. 居中圖片

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

img {     display: block;     margin: auto;     width: 40%; }
如何理解CSS對(duì)齊方式

二、左右

HTML代碼：

<html lang="en"> <head>   <meta charset="UTF-8">   <title>編程字典</title>  </head> <body>    <h3>右對(duì)齊</h3>   <p>如何正確定位元素與位置屬性的一個(gè)例子:</p>    <div class="right">     <p>在我年輕而脆弱的歲月里，父親給了我一些我一直以來(lái)一直在思考的建議.</p>   </div>  </body> </html>

1. 左右對(duì)齊 - 使用 position

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

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

.right {     position: absolute;     right: 0px;     width: 300px;     border: 3px solid #73AD21;     padding: 10px; }

注意：

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

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

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

body {     margin: 0;     padding: 0; }  .container {     position: relative;     width: 100%; }  .right {     position: absolute;     right: 0px;     width: 300px;     background-color: #b0e0e6; }

2. 左右對(duì)齊 - 使用 float

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

.right {     float: right;     width: 300px;     border: 3px solid #73AD21;     padding: 10px; }

提示：

當(dāng)將元素使用浮動(dòng)對(duì)齊時(shí)，總是為body元素定義邊距和填充。這是為了避免不同瀏覽器的視覺差異。

body {     margin: 0;     padding: 0; }  .right {     float: right;     width: 300px;     background-color: #b0e0e6; }

效果圖：

如何理解CSS對(duì)齊方式

三、垂直居中，水平居中

HTML代碼：

<html lang="en"> <head>   <meta charset="UTF-8">   <title>編程字典</title>  </head> <body>    <h3>居中</h3>   <p>在這個(gè)實(shí)例中,      我們使用定位和transform屬性實(shí)現(xiàn)元素的水平和垂直居中:</p>    <div class="center">     <!-- <p>我是垂直居中的.</p> -->     <p>我水平垂直居中.</p>        </div>    <p>注意: transform屬性不支持IE8和更早的版本.</p>  </body> </html>
如何理解CSS對(duì)齊方式

1. 使用 padding

有許多方法來(lái)中心垂直CSS元素. 一個(gè)簡(jiǎn)單的解決方案是使用頂部和底部 padding:

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

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

垂直居中

.center {     padding: 70px 0;     border: 3px solid green;     text-align: center; }
如何理解CSS對(duì)齊方式

2. 使用 line-height

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

.center {     line-height: 200px;     height: 200px;     border: 3px solid green;     text-align: center; }  /* If the text has multiple lines, add the following: */ .center p {     line-height: 1.5;     display: inline-block;     vertical-align: middle; }

3. 使用 position & transform

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

.center {     height: 200px;     position: relative;     border: 3px solid green; }  .center p {     margin: 0;     position: absolute;     top: 50%;     left: 50%;     transform: translate(-50%, -50%); }
如何理解CSS對(duì)齊方式

到此，相信大家對(duì)“如何理解CSS對(duì)齊方式”有了更深的了解，不妨來(lái)實(shí)際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

css
AI
助
手