div居中代碼 DIV水平居中顯示CSS代碼


如何使用CSSDIV居中顯示,讓div水平居中有哪些CSS樣式呢?

需要的主要css代碼有兩個,一個為text-align:center(內容居中),另外一個為margin:0 auto;其兩個樣式需要配合使用才能實現div盒子的居中顯示排版。

首先我們對body設置text-align:center,再對需要居中的div盒子設置css樣式margin:0 auto,這樣即可讓對應div水平居中。

實例講解div居中代碼應用,為了觀察div居中效果,我們對div設置一個div命名為“.div”在html中div標簽內使用class=“div”,設置其寬度為400px;高度為100px,邊框為紅色。以便我們觀察效果。

 

  1. <!DOCTYPE html
  2. <html
  3. <head
  4. <meta charset="utf-8" /> 
  5. <title></title
  6. <style
  7. body{ text-align:center} 
  8. .div{ margin:0 auto; width:400px; height:100px; border:1px solid #F00} 
  9. /* css注釋:為了觀察效果設置寬度 邊框 高度等樣式 */ 
  10. </style
  11. </head
  12. <body
  13. <div class="div"
  14. DIVCSS5實例 
  15. </div
  16. </body
  17. </html


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM