溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇內容主要講解“如何理解CSS對齊方式”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“如何理解CSS對齊方式”吧!
一、居中
1. 居中對齊元素
將塊元素水平居中對齊(像<div>) , 使用 margin: auto;設置元素的寬度將阻止它伸展到容器的邊緣。
然后元素將占用指定的寬度，剩下的空間將平分在兩個邊距之間：
這個div是居中的。
.center { margin: auto; width: 50%; border: 3px solid green; padding: 10px; }
注意：如果沒有設置寬度屬性，則居中對齊沒有效果 (或者設置到100%).
2. 居中對齊文本
將元素內部的文本居中, 使用text-align: center;
這些文本是居中的。
.center { text-align: center; border: 3px solid green; }
3. 居中圖片
居中圖片, 使用 margin: auto; 并且設置為塊級元素:
img { display: block; margin: auto; width: 40%; }
二、左右
HTML代碼：
<html lang="en"> <head> <meta charset="UTF-8"> <title>編程字典</title> </head> <body> <h3>右對齊</h3> <p>如何正確定位元素與位置屬性的一個例子:</p> <div class="right"> <p>在我年輕而脆弱的歲月里，父親給了我一些我一直以來一直在思考的建議.</p> </div> </body> </html>
1. 左右對齊 - 使用 position
對齊元素的一種方法是使用 position: absolute;
在我年輕而脆弱的歲月里，父親給了我一些我一直以來一直在思考的建議。
.right { position: absolute; right: 0px; width: 300px; border: 3px solid #73AD21; padding: 10px; }注意：
絕對定位元素從正常流中移除，并且可以重疊元素。
當使用 position對齊元素時, 總是定義 margin 和 padding 為 元素. 這是為了避免不同瀏覽器的視覺差異。
還有IE8和早期版本有一些問題, 當使用 position. 如果容器元素有一個指定的寬度 (例如： <div class="container">) , 并且沒有設置!DOCTYPE, IE8 和早期版本將添加 17px 外邊距到右邊. 這似乎是一條為滾動條預留空間. 因此，總是聲明 !DOCTYPE 當使用 position時:
body { margin: 0; padding: 0; } .container { position: relative; width: 100%; } .right { position: absolute; right: 0px; width: 300px; background-color: #b0e0e6; }2. 左右對齊 - 使用 float
對齊元素的另一種方法是使用 float 屬性:
.right { float: right; width: 300px; border: 3px solid #73AD21; padding: 10px; }提示：
當將元素使用浮動對齊時，總是為body元素定義邊距和填充。這是為了避免不同瀏覽器的視覺差異。
body { margin: 0; padding: 0; } .right { float: right; width: 300px; background-color: #b0e0e6; }效果圖：
三、垂直居中，水平居中
HTML代碼：
<html lang="en"> <head> <meta charset="UTF-8"> <title>編程字典</title> </head> <body> <h3>居中</h3> <p>在這個實例中, 我們使用定位和transform屬性實現元素的水平和垂直居中:</p> <div class="center"> <!-- <p>我是垂直居中的.</p> --> <p>我水平垂直居中.</p> </div> <p>注意: transform屬性不支持IE8和更早的版本.</p> </body> </html>
1. 使用 padding
有許多方法來中心垂直CSS元素. 一個簡單的解決方案是使用頂部和底部 padding:
.center { padding: 70px 0; border: 3px solid green; }水平和垂直居中, 使用 padding 和 text-align: center:
垂直居中
.center { padding: 70px 0; border: 3px solid green; text-align: center; }
2. 使用 line-height
另一個技巧是使用 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對齊方式”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
