Come centrare una casella di controllo in una cella di una tabella?

100

La cella non contiene altro che una casella di controllo. È piuttosto ampio a causa del testo nella riga dell'intestazione della tabella. Come centrare la casella di controllo (con CSS in linea nel mio HTML? (Lo so))

Provai 

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

ma non ha funzionato. Che cosa sto facendo di sbagliato?

Aggiornamento: ecco una pagina di prova. Qualcuno può correggerlo, con CSS in linea nell'HTML, in modo che le caselle di controllo siano centrate nelle loro colonne? 

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

Ho accettato la risposta di @ Hristo - ed eccola qui con la formattazione in linea ... 

<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 dice di reintegrare Monica
fonte
<td align = "center"> <input type = "checkbox" name = "myTextEditBox" value = "check"> </td> lo farà funzionare in IE8,9. Tuttavia, in IE10 o Chrome, la casella di controllo o la casella radio è definita in una casella, indipendentemente dalla visualizzazione o meno della casella. La casella sarà sempre allineata a sinistra. Ma all'interno della casella di definizione, la casella di controllo o la radio è centrata. Se la larghezza del TD che lo contiene è 100px, la casella di controllo è 50px, quindi è sempre allineata a sinistra. Per centrare la casella di controllo, puoi fare in modo che la casella di definizione della casella di controllo sia 100px, che è la stessa larghezza del TD che lo contiene.
— qeq

Risposte:

111

AGGIORNARE

Che ne dici di questo ... http://jsfiddle.net/gSaPb/

Guarda il mio esempio su 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;   
}

Spero che aiuti.

— Hristo
fonte
2
+1 Grazie, ma nel mio esempio non sembra funzionare. Si prega di consultare la domanda aggiornata
— Mawg dice di reintegrare Monica il
+1 Funziona. Ho pubblicato il codice aggiornato - con formattazione in linea - sopra. Ora devo solo fare un confronto di file e capire la differenza che lo fa funzionare., Grazie
— Mawg dice reintegrare Monica
Chiudi, ma sembra leggermente fuori posto con la mia tabella bootstrap-4. L'intestazione della colonna è decisamente centrata, ma la casella di controllo è un po 'a sinistra del centro
— Addison Klinke
27

Provare

<td style="text-align:center;">
  <input type="checkbox" name="myTextEditBox" value="checked" />
</td>
— Andrew Marshall
fonte
+1 Grazie, ma nel mio esempio non sembra funzionare. Si prega di consultare la domanda aggiornata
— Mawg dice di reintegrare Monica il
1
Ho appena testato il tuo codice aggiornato utilizzando la mia soluzione in Chrome 9 e funziona.
— Andrew Marshall
+1 Se funziona in MS IE e FireFox e inserisci il codice qui, la risposta è tua.
— Mawg dice di reintegrare Monica il
23

Prova questo, dovrebbe funzionare,

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

Dovrebbe funzionare, lo sto usando:

<td align="center"> <input type="checkbox" name="myTextEditBox" value="checked" ></td>
— Miloš
fonte
1
@ Gerard, chi sta parlando qui dell'HTML5?
— Miloš
5

Per la scrittura dinamica di elementi td e non fare affidamento direttamente sullo stile td

  <td>
     <div style="text-align: center;">
         <input  type="checkbox">
     </div>
  </td>
— Carlos E
fonte
Forse piuttosto <span> che <div>?
— Mawg dice di reintegrare Monica il
1
div è un elemento di blocco; il suo valore di visualizzazione predefinito è "blocco". Con span, l'immissione continua a sinistra. Prova per vedere la differenza
— Carlos E
Una buona spiegazione, che aiuterà gli altri in futuro (+1) Benvenuto a bordo
— Mawg dice reintegrare Monica il
4

Estrai TUTTO il tuo CSS in linea e spostalo in testa. Quindi usa le classi sulle celle in modo da poter regolare tutto come preferisci (non usare un nome come "centro" - puoi cambiarlo in sinistra tra 6 mesi ...). La risposta per l'allineamento è sempre la stessa: applicala alla <td>casella di controllo NON (questo centrerebbe il tuo segno di spunta :-))

Usando il tuo codice ...

<!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
fonte
2
Non dimenticare ... a tdè un tipo di elemento "speciale". Ha i suoi comportamenti unici - come un matrimonio in blocco e in linea (dall'inferno).
— Dawson
3

Se non supporti i browser legacy, lo userei flexboxperché è ben supportato e risolverà semplicemente la maggior parte dei tuoi problemi di layout.

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

Questo centra tutto il contenuto nella prima <td>di ogni riga.

— Rick Smith
fonte
1

Definisci la proprietà float dell'elemento check su none:

float: none;

E centra l'elemento genitore:

text-align: center;

È stato l'unico che funziona per me.

— Plastónico
fonte
Un "float: left;" ereditato me lo stava rovinando. L'impostazione "float: none" lo ha risolto.
— 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>
Espandi lo snippet

— Sergey
fonte
-2

Assicurati che il tuo <td>non lo siadisplay: block;

Il galleggiamento lo farà, ma molto più facile da solo: display: inline;

— askrich
fonte
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.