Como centralizar uma caixa de seleção em uma célula da tabela?

100

A célula não contém nada além de uma caixa de seleção. É bastante largo devido ao texto na linha do cabeçalho da tabela. Como faço para centralizar a caixa de seleção (com CSS embutido em meu HTML? (Eu sei))

eu tentei 

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

mas isso não funcionou. O que estou fazendo de errado?

Atualização: aqui está uma página de teste. Alguém pode corrigi-lo - com CSS embutido no HTML - de modo que as caixas de seleção fiquem centralizadas em suas colunas? 

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

Aceitei a resposta de @Hristo - e aqui está com formatação embutida ... 

<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 diz reintegrar Monica
fonte
<td align = "center"> <input type = "checkbox" name = "myTextEditBox" value = "CHECK"> </td> fará com que funcione no IE8,9. No entanto, no IE10 ou no Chrome, a caixa de seleção ou caixa de rádio é definida em uma caixa, independentemente de você vê-la ou não. A caixa sempre ficará alinhada à esquerda. Mas dentro da caixa de definição, a caixa de seleção ou rádio está centralizado. Se a largura do TD que o contém for 100px, a caixa de seleção será 50px e, então, será sempre alinhado à esquerda. Para centralizar a caixa de seleção, você pode fazer com que a caixa de definição da caixa de seleção tenha 100px, que é a mesma largura do TD que o contém.
— qeq

Respostas:

111

ATUALIZAR

Que tal isso ... http://jsfiddle.net/gSaPb/

Confira meu exemplo no 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;   
}

Eu espero que isso ajude.

— Hristo
fonte
2
+1 Obrigado, mas não parece funcionar no meu exemplo. Por favor, veja a pergunta atualizada
— Mawg diz restabelecer Monica em
+1 Isso funciona. Eu postei o código atualizado - com formatação embutida - acima. Agora eu só tenho que fazer uma comparação de arquivos e descobrir a diferença que o faz funcionar. Obrigado
— Mawg diz reintegrar Monica em
Perto, mas parece um pouco errado com a minha mesa bootstrap-4. O cabeçalho da coluna está definitivamente centralizado, mas a caixa de seleção está um pouco à esquerda do centro
— Addison Klinke
27

Experimentar

<td style="text-align:center;">
  <input type="checkbox" name="myTextEditBox" value="checked" />
</td>
— Andrew Marshall
fonte
+1 Obrigado, mas não parece funcionar no meu exemplo. Por favor, veja a pergunta atualizada
— Mawg diz restabelecer Monica em
1
Acabei de testar seu código atualizado usando minha solução no Chrome 9 e funciona.
— Andrew Marshall
+1 Se funcionar no MS IE e FireFox e você postar o código aqui, a resposta é sua.
— Mawg diz para restabelecer Monica em
23

Tente isso, isso deve funcionar,

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

Isso deve funcionar, estou usando:

<td align="center"> <input type="checkbox" name="myTextEditBox" value="checked" ></td>
— Miloš
fonte
1
@Gerard, quem está falando aqui do HTML5?
— Miloš,
5

Para escrever elementos td dinâmicos e não depender diretamente do estilo td

  <td>
     <div style="text-align: center;">
         <input  type="checkbox">
     </div>
  </td>
— Carlos E
fonte
Talvez em vez de <span> do que <div>?
— Mawg diz para restabelecer Monica em
1
div é um elemento de bloco; seu valor de exibição padrão é “bloco”. Com span, a entrada continua à esquerda. Teste para ver a diferença
— Carlos E
Uma boa explicação, que ajudará outros no futuro (+1) Bem-vindo a bordo
— Mawg diz para restabelecer Monica
4

Puxe TODO o seu CSS in-line e mova-o para o cabeçalho. Em seguida, use classes nas células para que possa ajustar tudo como quiser (não use um nome como "centro" - você pode alterá-lo para esquerda daqui a 6 meses ...). A resposta de alinhamento ainda é a mesma - aplique-a <td>NÃO à caixa de seleção (isso apenas centralizaria sua seleção :-))

Usando seu 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
fonte
2
Não se esqueça ... a tdé um tipo de elemento "especial". Ele tem seus próprios comportamentos únicos - como um casamento em bloco e em linha (do inferno).
— Dawson
3

Se você não oferece suporte a navegadores legados, eu usaria flexboxporque é bem suportado e simplesmente resolverá a maioria dos seus problemas de layout.

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

Isso centraliza todo o conteúdo na primeira <td>de cada linha.

— Rick smith
fonte
1

Defina a propriedade float do elemento check como nenhum:

float: none;

E centralize o elemento pai:

text-align: center;

Foi o único que funciona para mim.

— Plastónico
fonte
Um "float: left;" herdado estava estragando tudo para mim. A configuração "float: none" corrigiu isso.
— 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 trecho

— Sergey
fonte
-2

Certifique-se de que você <td>não édisplay: block;

Flutuar fará isso, mas muito mais fácil de apenas: display: inline;

— Askrich
fonte
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.