DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS詳解 >> 解決DIV水平居中和垂直居中的多種方案(3)
解決DIV水平居中和垂直居中的多種方案(3)
編輯:CSS詳解     
7、垂直居中和使用text-align水平居中

ExampleSourceCode[]

  1. <divstyledivstyle="float:left;width:275px;height:375px;border:solidred;">
  2. <div
  3. style="height:375px;width:275px;position:relative;
  4. display:table-cell;vertical-align:middle;">
  5. <div
  6. style="position:static;position:absolute\9;top:50%;">
  7. <div
  8. style="position:relative;top:-50%;text-align:center;">
  9. <divstyledivstyle="width:275px;">
  10. <divstyledivstyle="width:160px;WORD-WRAP:break-Word;TABLE-LAYOUT:fixed;
  11. Word-break:break-all;text-align:left;">
  12. div>
  13. div>
  14. div>
  15. div>
  16. div>
  17. div>

8、垂直居中和使用margin水平居中

ExampleSourceCode[]

  1. <divstyledivstyle="float:left;width:275px;
  2. height:375px;border:solidred;">
  3. <div
  4. style="height:375px;width:275px;position:relative;
  5. display:table-cell;vertical-align:middle;">
  6. <div
  7. style="position:static;position:absolute\9;top:50%;">
  8. <div
  9. style="position:relative;top:-50%;">
  10. <divstyledivstyle="margin:0auto;width:160px;WORD-WRAP:break-Word;
  11. TABLE-LAYOUT:fixed;Word-break:break-all;">
  12. div>
  13. div>
  14. div>
  15. div>
  16. div>
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved