如何居中此複選框？

我有一個表，其中只包含一個複選框一列，我目前正在與如何居中此複選框？

<td style="text-align:center; vertical-align:middle;"> 
    <input type="checkbox" name="xyz"> 
</td>

現在我想添加一些JS來的（de）選擇全部/無定心這些，所以我要添加我的表格標題行中的複選框，以及一些文字

TH是，默認情況下，粗體和我很高興離開它，所以實際列標題文本，埠我是普通文本的「所有/無」，然後我想要一箇中心複選框下面。

---------------- 
| Search ? | Next column 
| (all/none) | 
| [x]  |

這是我的代碼 - 如何讓該複選框居中？

<th>Search?<br>  
    <span class="th_not_bold">(all/none)</span><br>  
    <input style="text-align:center; vertical-align:middle" type="checkbox" name="search_all" id="search_all" onClick="ReportAllNoneClicked()"> 
</th>

來源

2011-11-18 Mawg

嘗試使用

<th> 
<td style="text-align:center; vertical-align:middle;"> 
<div>Search</div> 
    <div class="th_not_bold">(all/none)</div> 
    <div><input style="text-align:center; vertical-align:middle" type="checkbox" name="search_all" id="search_all" onClick="ReportAllNoneClicked()"> </div> 
</td> 
</th>

來源

2011-11-18 03:31:15 Varun

Thnaks。我沒有說明，但內聯CSS有助於在一個 – Mawg

@Mawg - 你應該總是儘量不要使用內聯CSS，因爲你只是使用內聯CSS。嘗試使用單獨的CSS總是w3c也這麼說。使結構看起來更整齊乾淨 – Varun

+1好吧，我保證會很好;-) – Mawg

你會做的正是你做你的其他<td>同樣的事 - 你會設置text-align center; vertical-align: middle;對<th>，你就不需要任何屬性應用於複選框：

Here's an example of the code you'd use：

th{ 
    text-align: center; 
    vertical-align: middle; 
}

來源

2011-11-18 03:30:28 Nightfirecat

您可以使用文本對齊：中心。這是什麼看起來像：http://jsfiddle.net/RcztD/1/

<html> 
<head></head> 
<style type="text/css"> 
    .center{ 
     text-align:center; 
    } 
</style> 
<body> 

    <table border="1"> 
     <tr> 
      <th valign="top" class="center"> 
       Search?<br />  
       <span class="th_not_bold">(all/none)</span><br />  
       <input type="checkbox" name="search_all" id="search_all onClick="ReportAllNoneClicked()" /> 
      </th> 
     </tr> 
    </table> 

</body> 
</html>

來源

2011-11-18 03:37:17 Micah

如何居中此複選框？

回答

相關問題