HTML佈局問題 - 帶有居中圖像的3x3表格

我正在嘗試爲HTML頁面創建一個3x3佈局。我曾嘗試過多種方法，使用devs和soley table，但似乎無法在居中圖像和其餘表格行周圍獲得均勻的距離。這裏是什麼，我想實現的佈局表示：HTML佈局問題 - 帶有居中圖像的3x3表格

enter image description here

<body> 

<h1>Web Portal</h1> 

<div> 
    <table class="styled"> 
    <tr> 
     <td><button type="button">Click Me!</button></td> 
     <td><button type="button">Click Me!</button></td> 
     <td><button type="button">Click Me!</button></td> 
    </tr> 
    </table> 
</div> 

<div> 
    <table> 
     <tr> 
      <td><button type="button">Click Me!</button></td> 
     </tr> 
    </table> 

    <img src="rais_globe.png" alt="rais_logo" height="420" width="420"> 

    <table> 
     <tr> 
      <td><button type="button">Click Me!</button></td> 
     </tr> 
    </table> 

</div>

來源

2014-01-13 BodhiByte

嘗試使用引導程序的網格框架。 – Ranveer

向我們展示一些代碼，你試過了什麼？ – Ruddy

與小提琴一起顯示代碼將很好 – Zword

demo with css tables

HTML

<div class="table"> 
    <div class="row"> 
     <div class="cell1">row 1</div> 
     <div class="cell2"></div> 
     <div class="cell3"></div> 
    </div> 
    <div class="row"> 
     <div class="cell1">row 2</div> 
     <div class="cell2"> 
      <img src="http://upload.wikimedia.org/wikipedia/commons/1/1b/Square_200x200.png" /> 
     </div> 
     <div class="cell3"></div> 
    </div> 
    <div class="row"> 
     <div class="cell1">row 3</div> 
     <div class="cell2"></div> 
     <div class="cell3"></div> 
    </div> 
</div>

CSS

html, body { 
    width:100%; 
    height:100%; 
    margin:0; 
    padding:0; 
} 
.table { 
    display:table; 
    width:100%; 
    height:100%; 
    border:1px solid #000; 
} 
.row { 
    display:table-row; 
    height:100%; 
} 
.cell1, .cell2, .cell3 { 
    display:table-cell; 
    width:33%; 
    height:100%; 
    border:1px solid #CCC; 
} 
.cell2 > img { 
    width:100%; 
    height:auto; 
}

來源

2014-01-13 08:25:43 NoobEditor

HTML佈局問題 - 帶有居中圖像的3x3表格

回答

相關問題