¿Cómo centrar una casilla de verificación en una celda de tabla?

100

La celda no contiene nada más que una casilla de verificación. Es bastante ancho debido al texto en la fila del encabezado de la tabla. ¿Cómo centro la casilla de verificación (con CSS en línea en mi HTML? (Lo sé))

Lo intenté 

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

pero eso no funcionó. ¿Qué estoy haciendo mal?

Actualización: aquí hay una página de prueba. ¿Alguien puede corregirlo, con CSS en línea en el HTML, para que las casillas de verificación estén centradas en sus columnas? 

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

He aceptado la respuesta de @ Hristo, y aquí está con formato en línea ... 

<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 reinstalar a Monica
fuente
<td align = "center"> <input type = "checkbox" name = "myTextEditBox" value = "check"> </td> hará que funcione en IE8,9. Sin embargo, en IE10 o Chrome, la casilla de verificación o casilla de radio se define en una casilla, sin importar si ve la casilla o no. La caja siempre estará alineada a la izquierda. Pero dentro del cuadro de definición, la casilla de verificación o radio está centrada. Si el ancho del TD que contiene es 100px, la casilla de verificación es 50px, entonces siempre está alineado a la izquierda. Para centrar la casilla de verificación, puede hacer que la casilla de definición de la casilla de verificación sea 100px, que es el mismo ancho del TD que lo contiene.
— qeq

Respuestas:

111

ACTUALIZAR

¿Qué tal esto ... http://jsfiddle.net/gSaPb/

Mira mi ejemplo en 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;   
}

Espero que esto ayude.

— Hristo
fuente
2
+1 Gracias, pero no parece funcionar en mi ejemplo. Consulte la pregunta actualizada
— Mawg dice reinstalar a Monica
+1 Eso funciona. He publicado el código actualizado, con formato en línea, arriba. Ahora solo tengo que hacer una comparación de archivos y descubrir la diferencia que hace que funcione., Gracias
— Mawg dice restablecer a Monica
Cerca, pero parece un poco fuera de lugar con mi tabla bootstrap-4. El encabezado de la columna está definitivamente centrado, pero la casilla de verificación está un poco a la izquierda del centro
— Addison Klinke
23

Prueba esto, debería funcionar

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

Esto debería funcionar, lo estoy usando:

<td align="center"> <input type="checkbox" name="myTextEditBox" value="checked" ></td>
— Miloš
fuente
1
@Gerard, ¿quién está hablando aquí sobre HTML5?
— Miloš
5

Para escritura dinámica de elementos td y no depender directamente del estilo td

  <td>
     <div style="text-align: center;">
         <input  type="checkbox">
     </div>
  </td>
— Carlos E
fuente
¿Quizás más bien <span> que <div>?
— Mawg dice reinstalar a Monica el
1
div es un elemento de bloque; su valor de visualización predeterminado es "bloque". Con span, la entrada continúa a la izquierda. Prueba para ver la diferencia
— Carlos E
Una buena explicación, que ayudará a otros en el futuro (+1) Bienvenido a bordo
— Mawg dice que reintegre a Monica el
4

Saque TODO su CSS en línea y muévalo a la cabeza. Luego use clases en las celdas para que pueda ajustar todo como desee (no use un nombre como "centro"; puede cambiarlo a la izquierda dentro de 6 meses ...). La respuesta de alineación sigue siendo la misma: aplíquela a <td>NO la casilla de verificación (eso solo centraría su verificación :-))

Usando tu código ...

<!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
fuente
2
No olvide ... a tdes un tipo de elemento "especial". Tiene sus propios comportamientos únicos, como un bloqueo y un matrimonio en línea (del infierno).
— Dawson
3

Si no es compatible con los navegadores heredados, lo usaría flexboxporque está bien admitido y simplemente resolverá la mayoría de sus problemas de diseño.

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

Esto centra todo el contenido en la primera <td>de cada fila.

— Rick Smith
fuente
1

Defina la propiedad flotante del elemento check en none:

float: none;

Y centre el elemento padre:

text-align: center;

Fue el único que me funcionó.

— Plastónico
fuente
Un "float: left;" heredado me lo estaba arruinando. La configuración de "flotar: ninguno" lo solucionó.
— 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>
Expandir fragmento

— Sergey
fuente
-2

Asegúrate de que tu <td>no seadisplay: block;

Flotar hará esto, pero es mucho más fácil simplemente: display: inline;

— askrich
fuente
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.