Jak wyśrodkować pole wyboru w komórce tabeli?

100

Komórka zawiera tylko pole wyboru. Jest dość szeroki ze względu na tekst w nagłówku tabeli. Jak wyśrodkować pole wyboru (z wbudowanym CSS w moim kodzie HTML? (Wiem))

próbowałem 

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

ale to nie zadziałało. Co ja robię źle?

Aktualizacja: oto strona testowa. Czy ktoś może to poprawić - za pomocą CSS w kodzie HTML - tak, aby pola wyboru były wyśrodkowane w swoich kolumnach? 

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

Zaakceptowałem odpowiedź @ Hristo - i tutaj jest z formatowaniem wbudowanym ... 

<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 mówi, że przywróć Monikę
źródło
<td align = "center"> <input type = "checkbox" name = "myTextEditBox" value = "selected"> </td> sprawi, że będzie działać w IE8,9. Jednak w IE10 lub Chrome pole wyboru lub radiobox jest zdefiniowane w ramce, bez względu na to, czy widzisz to pole, czy nie. Ramka zawsze będzie wyrównana do lewej. Ale w polu definiującym pole wyboru lub radio jest wyśrodkowane. Jeśli szerokość zawierającego TD wynosi 100 pikseli, pole wyboru ma wartość 50 pikseli, a następnie jest zawsze wyrównane do lewej. Aby wyśrodkować pole wyboru, możesz ustawić ramkę definiującą chekbox na 100px, czyli taką samą szerokość zawierającego TD.
qeq

Odpowiedzi:

111

AKTUALIZACJA

Co powiesz na to ... http://jsfiddle.net/gSaPb/

Sprawdź mój przykład na 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;   
}

Mam nadzieję, że to pomoże.

Hristo
źródło
2
+1 Dzięki, ale w moim przykładzie to nie działa. Proszę zobaczyć zaktualizowane pytanie
Mawg mówi, że przywróć Monikę
+1 To działa. Opublikowałem zaktualizowany kod - z formatowaniem wbudowanym - powyżej. Teraz muszę tylko porównać pliki i dowiedzieć się, jaka różnica sprawia, że ​​to działa., Dzięki
Mawg mówi, że przywróć Monikę
Blisko, ale wydaje mi się, że trochę nie pasuje do mojego stołu bootstrap-4. Nagłówek kolumny jest zdecydowanie wyśrodkowany, ale pole wyboru jest nieco na lewo od środka
Addison Klinke,
27

Próbować

<td style="text-align:center;">
  <input type="checkbox" name="myTextEditBox" value="checked" />
</td>
Andrew Marshall
źródło
+1 Dzięki, ale w moim przykładzie to nie działa. Proszę zobaczyć zaktualizowane pytanie
Mawg mówi, że przywróć Monikę
1
Właśnie przetestowałem Twój zaktualizowany kod przy użyciu mojego rozwiązania w Chrome 9 i działa.
Andrew Marshall,
+1 Jeśli działa w MS IE i FireFox i umieszczasz tutaj kod, odpowiedź jest Twoja.
Mawg mówi, że przywróć Monice
23

Spróbuj tego, to powinno działać,

td input[type="checkbox"] {
    float: left;
    margin: 0 auto;
    width: 100%;
}
Prabhakaran S
źródło
10

To powinno działać, używam go:

<td align="center"> <input type="checkbox" name="myTextEditBox" value="checked" ></td>
Miloš
źródło
1
@Gerard, kto tu mówi o HTML5?
Miloš
5

Do dynamicznego pisania elementów td i nie polegaj bezpośrednio na stylu td

  <td>
     <div style="text-align: center;">
         <input  type="checkbox">
     </div>
  </td>
Carlos E.
źródło
Może raczej <span> niż <div>?
Mawg mówi, że przywróć Monikę
1
div jest elementem blokowym; jego domyślną wartością wyświetlaną jest „blok”. W przypadku rozpiętości wprowadzanie jest kontynuowane po lewej stronie. Test, aby zobaczyć różnicę
Carlos E
Dobre wyjaśnienie, które pomoże innym w przyszłości (+1) Witamy na pokładzie
Mawg mówi, że przywróć Monikę
4

Wyciągnij WSZYSTKIE wbudowane CSS i przenieś je do głowy. Następnie użyj klas na komórkach, abyś mógł wszystko dostosować tak, jak chcesz (nie używaj nazwy typu „centrum” - możesz ją zmienić na lewą za 6 miesięcy ...). Odpowiedź dotycząca wyrównania jest nadal taka sama - zastosuj ją do pliku<td> pola wyboru NIE (to po prostu wyśrodkuje twój czek :-))

Używając Twojego kodu ...

<!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
źródło
2
Nie zapomnij ... a tdto „specjalny” rodzaj elementu. Ma swoje unikalne zachowania - jak blokowe i in-line małżeństwo (z piekła rodem).
Dawson,
3

Jeśli nie obsługujesz starszych przeglądarek, użyłbym, flexboxponieważ jest dobrze obsługiwany i po prostu rozwiąże większość problemów z układem.

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

Spowoduje to wyśrodkowanie całej treści w pierwszym <td>z każdego wiersza.

Rick Smith
źródło
1

Zdefiniuj właściwość float elementu check na none:

float: none;

I wyśrodkuj element nadrzędny:

text-align: center;

Tylko to działa dla mnie.

Plastónico
źródło
Dziedziczony atrybut „float: left;” rujnował to dla mnie. Ustawienie „float: none” naprawiło to.
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>
Rozwiń fragment

Siergiej
źródło
-2

Upewnij się, że Twój <td> nie jestdisplay: block;

Floating zrobi to, ale znacznie łatwiej po prostu: display: inline;

askrich
źródło