Bir tablo hücresindeki bir onay kutusu nasıl ortalanır?

100

Hücre, bir onay kutusundan başka bir şey içermez. Tablo başlığı satırındaki metin nedeniyle oldukça geniştir. Onay kutusunu nasıl ortalayabilirim (HTML'mde satır içi CSS ile? (Biliyorum))

denedim 

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

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

Güncelleme: işte bir test sayfası. Birisi lütfen bunu - HTML'de CSS satır içi olarak - onay kutularının sütunlarında ortalanacak şekilde düzeltebilir mi? 

<!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'nun cevabını kabul ettim - ve işte burada satır içi biçimlendirmeyle ... 

<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>
html  css 
— Mawg, Monica'yı eski durumuna getir diyor
kaynak
<td align = "center"> <input type = "checkbox" name = "myTextEditBox" value = "işaretli"> </td>, IE8,9'da çalışmasını sağlayacaktır. Ancak IE10 veya chrome'da, kutuyu görseniz de görmeseniz de, onay kutusu veya radyo kutusu bir kutu içinde tanımlanır. Kutu her zaman sola hizalı olacaktır. Ancak tanımlayıcı kutunun içinde, onay kutusu veya radyo ortalanmıştır. İçeren TD'nin genişliği 100px ise, onay kutusu 50px ise, her zaman sola hizalanır. Onay kutusunu ortalamak için, chekbox'ın tanımlayıcı kutusunu, içeren TD ile aynı genişlikte olan 100px yapabilirsiniz.
— qeq

Yanıtlar:

111

GÜNCELLEME

Buna ne dersin ... http://jsfiddle.net/gSaPb/

JsFiddle'daki örneğime 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;   
}

Umarım bu yardımcı olur.

— Hristo
kaynak
2
+1 Teşekkürler, ama benim örneğimde işe yaramıyor. Lütfen güncellenmiş soruya bakın
— Mawg, Monica
+1 Çalışır. Yukarıda satır içi biçimlendirme ile güncellenmiş kodu gönderdim. Şimdi sadece bazı dosyaları karşılaştırmalı ve işe
— yarayan farkı bulmalıyım
Kapat, ancak önyükleme-4 masamda biraz bozuk görünüyor. Sütun başlığı kesinlikle ortalanmış, ancak onay kutusu merkezin biraz solunda
— Addison Klinke
27

Deneyin

<td style="text-align:center;">
  <input type="checkbox" name="myTextEditBox" value="checked" />
</td>
— Andrew Marshall
kaynak
+1 Teşekkürler, ama benim örneğimde işe yaramıyor. Lütfen güncellenmiş soruya bakın
— Mawg, Monica
1
Güncel kodunuzu Chrome 9'daki çözümümü kullanarak test ettim ve çalışıyor.
— Andrew Marshall
+1 MS IE ve FireFox'ta çalışıyorsa ve kodu buraya yazarsanız, yanıt sizindir.
— Mawg, Monica
23

Bunu dene, bu çalışmalı

td input[type="checkbox"] {
    float: left;
    margin: 0 auto;
    width: 100%;
}
— Prabhakaran S
kaynak
10

Bu işe yaramalı, kullanıyorum:

<td align="center"> <input type="checkbox" name="myTextEditBox" value="checked" ></td>
— Miloš
kaynak
1
@Gerard, burada HTML5'ten kim bahsediyor?
— Miloš
5

Dinamik yazma td öğeleri için ve doğrudan td Stiline güvenmeyin

  <td>
     <div style="text-align: center;">
         <input  type="checkbox">
     </div>
  </td>
— Carlos E
kaynak
Belki <div> yerine <span>?
— Mawg, Monica'nın
1
div bir blok öğesidir; varsayılan görüntü değeri "blok" dur. Aralık ile giriş solda devam eder. Farkı görmek için test edin
— Carlos E
Gelecekte başkalarına yardımcı olacak iyi bir açıklama (+1) Gemiye hoş geldiniz
— Mawg, Monica'nın eski durumuna getirilmesini söylüyor
4

Satır içi CSS'nizin TÜMÜNÜ çıkarın ve başa taşıyın. Sonra her şeyi istediğiniz gibi ayarlayabilmek için hücrelerdeki sınıfları kullanın ("merkez" gibi bir ad kullanmayın - bundan 6 ay sonra sola çevirebilirsiniz ...). Hizalama yanıtı hala aynıdır - bunu <td>onay kutusuna DEĞİLDİR (bu sadece kontrolünüzü ortalayacaktır :-))

Kodunuzu kullanarak ...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Alignment test</title>
<style>
table { margin:10px auto; border-collapse:collapse; border:1px solid gray; }
td,th { border:1px solid gray; text-align:left; padding:20px; }
td.opt1 { text-align:center; vertical-align:middle; }
td.opt2 { text-align:right; }
</style>
</head>
<body>

<table>

      <tr>
        <th>Search?</th><th>Field</th><th colspan="2">Search criteria</th><th>Include in report?<br></th>
      </tr>
      <tr>
        <td class="opt1"><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 class="opt2">
          <input type="checkbox" name="report_myTextEditBox" value="checked">
        </td>
      </tr>
    </table>
    </body>
    </html>
— Dawson
kaynak
2
Unutma ... a td"özel" bir unsurdur. Kendine özgü davranışları vardır - blok ve sıralı evlilik (cehennemden) gibi.
— Dawson
3

Eğer eski tarayıcılar desteklemez, ben kullanmak istiyorum flexboxo çünkü iyi desteklenen ve sadece düzen problemlerin çoğunu çözecektir.

#table-id td:nth-child(1) { 
    /* nth-child(1) is the first column, change to fit your needs */
    display: flex;
    justify-content: center;
}

Bu <td>, her satırın ilkindeki tüm içeriği ortalar .

— Rick Smith
kaynak
1

Kontrol öğesinin float özelliğini yok olarak tanımlayın:

float: none;

Ve ana öğeyi ortalayın:

text-align: center;

Benim için çalışan tek şey oydu.

— Plastónico
kaynak
Devralınan bir "float: left;" benim için mahvediyordu. "Float: none" ayarı sorunu çözdü.
— jornhd
0 

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>

<table class="table table-bordered">
  <thead>
    <tr>
      <th></th>
      <th class="text-center">Left</th>
      <th class="text-center">Center</th>
      <th class="text-center">Right</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>
        <span>Bootstrap (class="text-left")</span>
      </th>
      <td class="text-left">
        <input type="checkbox" />
      </td>
      <td class="text-center">
        <input type="checkbox" checked />
      </td>
      <td class="text-right">
        <input type="checkbox" />
      </td>
    </tr>
    <tr>
      <th>
        <span>HTML attribute (align="left")</span>
      </th>
      <td align="left">
        <input type="checkbox" />
      </td>
      <td align="center">
        <input type="checkbox" checked />
      </td>
      <td align="right">
        <input type="checkbox" />
      </td>
    </tr>
  </tbody>
</table>
Snippet'i genişlet

— Sergey
kaynak
-2

Emin olun <td> değildisplay: block;

Yüzer bunu yapacak, ancak çok daha kolay: display: inline;

— Askrich
kaynak
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.