表中的對齊問題

我有2個div，我把它放在一張桌子裏以便水平對齊。表中的對齊問題

<table> 
    <tr> 
     <td> 
     <div> 
      data 
     </div> 
     <div> 
      data 
     </div> 
     </td> 
    </tr> 
</table>

它看起來像以下：

enter image description here

我現在想在中心對齊這些2，而不是左側。我試過<td style="margin-left:auto; margin-right:auto;"> 但沒有快樂。？

任何想法`

來源

2013-04-17 John

我不能完全確定什麼是「數據」是指，由於沒有「數據」在圖像內。但是，爲什麼要將這些分隔線放在您的表格單元中？你爲什麼不簡單地使用'數據數據'？ –

你可以添加更多的代碼嗎？圖像中的元素在哪裏？ – nmat

感謝您的幫助，但我明白了......應該將樣式應用到

而不是的 – John

回答

應用margins到<table/>：

table { 
    margin: 0 auto; 
}

這裏是一個demo fiddle。

來源

2013-04-17 14:49:51

創建一個小提琴example

使用ALIGN = 「中心」爲TD和DIV使用顯示：內聯塊;

<table style="border: 1px solid green; width: 100%; "> 
<tbody><tr> 
    <td align="center"> 
    <div style="border: 1px solid red;width: 30px;display: inline-block;"> 
     data 
    </div> 
    <div style="border: 1px solid red;width: 30px;display: inline-block;"> 
     data 
    </div> 
    </td>

來源

2013-04-17 15:07:12 NullPointerException

<div id="containerdiv"> 
    <div id="coveringdiv"> 
    <div id="firstdiv"> 
     <div id="yourdata"> 
     Your Data Here 
     </div> 
     <div id="yourvalue"> 
     Value 
     </div> 
    </div> 
    <div id="seconddiv"> 
     <div id="yourdata"> 
     Your Data Second 
     </div> 
     <div id="yourvalue"> 
     values2 
     </div> 
    </div> 
    </div> 

</div>

和CSS：

body 
{ 
background-color: #123456; 
} 


#coveringdiv 
{ 
border: solid 1px #FFFFFF; 
height: 200px; 
margin: 0 auto; 
width: 100%; 
text-align: center; 
} 

#firstdiv 
{ 
display: inline-block; 
} 

#yourdata 
{ 
color: #FFFFFF; 
font-size: 10px; 
} 

#yourvalue 
{ 
color: #FFFFFF; 
font-size: 24px; 
} 

#seconddiv 
{ 
display: inline-block; 
}

來源

2013-04-17 15:24:18 subZero

相關問題