Nasıl bir tablo hücresine bir checkbox merkezi?

SORU

19 ŞUBAT 2011, CUMARTESİ

Nasıl bir tablo hücresine bir checkbox merkezi?

Hücre hiçbir şey ama bir onay kutusu içerir. Tablonun başlık satırı metin nedeniyle oldukça geniş. Nasıl onay kutusu (içi ile benim HTMNL CSS? merkezi yapmak İ (Biliyorum))

Denedim

 <td>
      <input type="checkbox" name="myTextEditBox" value="checked" 
      style="margin-left:auto; margin-right:auto;">
 </td>

ama işe yaramadı. Neyi yanlış yapıyorum?

Güncelleme: burada bir test sayfası. Onay kutularını kendi sütun merkezli olan biri düzeltin lütfen - HTML CSS satır içi ile olabilir?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Alignment test</title>
</head>
<body>

<table style="empty-cells:hide; margin-left:auto; margin-right:auto;" border="1"   cellpadding="1" cellspacing="1">

  <tr>
    <th>Search?</th><th>Field</th><th colspan="2">Search criteria</th><th>Include in report?<br></th>
  </tr>

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

    <td>
      myTextEditBox
    </td>

    <td>
       <select size ="1" name="myTextEditBox_compare_operator">
        <option value="=">equals</option>
        <option value="<>">does not equal</option>
       </select>
    </td>

    <td>
      <input type="text" name="myTextEditBox_compare_value">
    </td>

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

  </tr>

</table>


</body>
</html>

@Hristo cevabı kabul ettim ve burada satır içi biçimlendirme ile

<table style="empty-cells:hide;" border="1"   cellpadding="1" cellspacing="1">

    <tr>
        <th>Search?</th><th>Field</th><th colspan="2">Search criteria</th><th>Include in report?<br></th>
    </tr>

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

        <td>
            myTextEditBox
        </td>

        <td>
            <select size ="1" name="myTextEditBox_compare_operator">
                <option value="=">equals</option>
                <option value="<>">does not equal</option>
            </select>
        </td>

        <td>
            <input type="text" name="myTextEditBox_compare_value">
        </td>

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

    </tr>

</table>

CEVAP

19 ŞUBAT 2011, CUMARTESİ

GÜNCELLEME

Nasıl bu... http://jsfiddle.net/gSaPb/ hakkında

JsFiddle benim örneğe bakın: http://jsfiddle.net/QzPGu/

HTML

<table>
    <tr>
        <td>
            <input type="checkbox" name="myTextEditBox" value="checked" /> checkbox
        </td>
    </tr>
</table>

CSS

td {
    text-align: center; /* center checkbox horizontally */
    vertical-align: middle; /* center checkbox vertically */
}
table {
    border: 1px solid;
    width: 200px;
}
tr {
    height: 80px;   
}

Bu yardımcı olur umarım.

Bunu Paylaş: