溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要為大家展示了“如何使用CSS浮動屬性實現DIV各種對齊”，內容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領大家一起研究并學習一下“如何使用CSS浮動屬性實現DIV各種對齊”這篇文章吧。
1、div左對齊條件與方法
只需要對要靠左對齊（局左）的div樣式加float:left即可。
2、DIV+CSS布局完整代碼：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>div對齊實例 在線演示 DIVCSS5</title> <style> .億速云-left{float:left;width:250px;height:50px;border:1px solid #F00} </style> </head> <body> <div class="億速云-left">此DIV靠左對齊顯示</div> </body> </html>3、實例截圖：
div居左靠左對齊實例截圖
1、div右對齊條件與方法
只需要對要靠右對齊（局右）的div樣式加float:right即可。
2、div css布局完整html代碼：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>div對齊實例 在線演示 DIVCSS5</title> <style> .億速云-right{float:left;width:250px;height:50px;border:1px solid #F00} </style> </head> <body> <div class="億速云-right">此DIV靠右對齊顯示</div> </body> </html>3、靠右對齊實例截圖
css實現div居右對齊實例截圖
1、div居中對齊條件與方法
只需要對要居中對齊的div樣式加margin:0 auto，不再需要加float樣式。
因為float沒有居中的浮動，所以我們需要去掉float樣式，為了兼容各大瀏覽器讓div居中對齊，我們需要對div對應樣式加margin:0 auto即可。
2、css+div布局完整HTML源代碼：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>div對齊實例 在線演示 DIVCSS5</title> <style> .億速云-cent{margin:0 auto;width:250px;height:50px;border:1px solid #F00} </style> </head> <body> <div class="億速云-cent">此DIV居中右對齊顯示</div> </body> </html>3、css布局實例截圖
以上是“如何使用CSS浮動屬性實現DIV各種對齊”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
