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ş:
  • Google+
  • E-Posta
Etiketler:

YORUMLAR

SPONSOR VİDEO

Rastgele Yazarlar

  • Dave Wallace

    Dave Wallace

    27 Kasım 2007
  • Marina and The Diamonds

    Marina and T

    8 Temmuz 2008
  • Māris Zaharovs

    Māris Zahar

    28 Mayıs 2008