Bagaimana cara memusatkan kotak centang di sel tabel?

100

Sel tersebut hanya berisi kotak centang. Ini agak lebar karena teks di baris tajuk tabel. Bagaimana cara menengahkan kotak centang (dengan inline CSS di HTML saya? (Saya tahu))

Saya mencoba 

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

tapi itu tidak berhasil. Apa yang saya lakukan salah?

Pembaruan: ini adalah halaman pengujian. Bisakah seseorang memperbaikinya - dengan CSS sebaris di HTML - sehingga kotak centang berada di tengah kolom mereka? 

<!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>

Saya telah menerima jawaban @ Hristo - dan ini dia dengan format inline ... 

<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 mengatakan kembalikan Monica
sumber
<td align = "center"> <input type = "checkbox" name = "myTextEditBox" value = "check"> </td> akan membuatnya berfungsi di IE8,9. Namun di IE10 atau chrome, kotak centang atau kotak radio ditentukan dalam sebuah kotak, tidak peduli Anda melihat kotak itu atau tidak. Kotak akan selalu rata kiri. Tetapi di dalam kotak penentu, kotak centang atau radio berada di tengah. Jika lebar TD berisi 100px, checkbox 50px, maka selalu kiri rata. Untuk menengahkan kotak centang, Anda dapat membuat kotak penentu dari kotak centang menjadi 100px, yang merupakan lebar yang sama dari TD yang berisi.
qeq

Jawaban:

111

MEMPERBARUI

Bagaimana dengan ini ... http://jsfiddle.net/gSaPb/

Lihat contoh saya di jsFiddle: 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;   
}

Saya harap ini membantu.

Hristo
sumber
2
+1 Terima kasih, tetapi tampaknya tidak berhasil dalam contoh saya. Silakan lihat pertanyaan yang diperbarui
Mawg mengatakan memulihkan Monica
+1 Itu berhasil. Saya telah memposting kode yang diperbarui - dengan format sebaris - di atas. Sekarang saya hanya perlu membandingkan beberapa file & mencari tahu perbedaan yang membuatnya bekerja., Terima kasih
Mawg mengatakan mengembalikan Monica
Tutup, tetapi tampaknya sedikit tidak aktif dengan tabel bootstrap-4 saya. Tajuk kolom jelas berada di tengah, tetapi kotak centangnya sedikit di kiri tengah
Addison Klinke
27

Mencoba

<td style="text-align:center;">
  <input type="checkbox" name="myTextEditBox" value="checked" />
</td>
Andrew Marshall
sumber
+1 Terima kasih, tetapi tampaknya tidak berhasil dalam contoh saya. Silakan lihat pertanyaan yang diperbarui
Mawg mengatakan memulihkan Monica
1
Saya baru saja menguji kode yang diperbarui menggunakan solusi saya di Chrome 9 dan berhasil.
Andrew Marshall
+1 Jika berfungsi di MS IE dan FireFox dan Anda memposting kodenya di sini, maka jawabannya ada di tangan Anda.
Mawg mengatakan mengembalikan Monica
23

Coba ini, ini seharusnya berhasil,

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

Ini harus bekerja, saya menggunakannya:

<td align="center"> <input type="checkbox" name="myTextEditBox" value="checked" ></td>
Miloš
sumber
1
@ Gerard, siapa yang berbicara di sini tentang HTML5?
Miloš
5

Untuk menulis elemen td dinamis dan tidak bergantung langsung pada Style td

  <td>
     <div style="text-align: center;">
         <input  type="checkbox">
     </div>
  </td>
Carlos E.
sumber
Mungkin lebih suka <span> daripada <div>?
Mawg mengatakan memulihkan Monica
1
div adalah elemen blok; nilai tampilan defaultnya adalah "blok". Dengan span, input berlanjut di kiri. Uji untuk melihat perbedaan
Carlos E
Penjelasan yang bagus, yang akan membantu orang lain di masa depan (+1) Selamat
bergabung
4

Tarik SEMUA CSS sebaris Anda , dan pindahkan ke kepala. Kemudian gunakan kelas pada sel sehingga Anda dapat menyesuaikan semuanya sesuka Anda (jangan gunakan nama seperti "center" - Anda dapat mengubahnya ke kiri 6 bulan dari sekarang ...). Jawaban penyelarasan masih sama - terapkan ke <td>BUKAN kotak centang (yang hanya akan memusatkan cek Anda :-))

Menggunakan kode Anda ...

<!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
sumber
2
Jangan lupa ... a tdadalah jenis elemen "khusus". Ini memiliki perilaku uniknya sendiri - seperti perkawinan blok dan antrean (dari neraka).
Dawson
3

Jika Anda tidak mendukung browser lama, saya akan menggunakan flexboxkarena didukung dengan baik dan hanya akan menyelesaikan sebagian besar masalah tata letak Anda.

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

Ini memusatkan semua konten di baris pertama <td>setiap baris.

Rick Smith
sumber
1

Tentukan properti float dari elemen check ke none:

float: none;

Dan pusatkan elemen induk:

text-align: center;

Itu satu-satunya yang berhasil untuk saya.

Plastónico
sumber
Sebuah warisan "float: left;" merusaknya untukku. Pengaturan "float: none" memperbaikinya.
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>
Luaskan cuplikan

Sergey
sumber
-2

Pastikan Anda <td>tidakdisplay: block;

Mengambang akan melakukan ini, tetapi jauh lebih mudah untuk hanya: display: inline;

askrich
sumber