2

Como eu faço para alinhar o conteúdo da <td> dentro da minha tabela?

Sei que para alinha horizontalmente utilizo text-align: center; //text-aling está errado.

Quero que fique igual a Teste e Armas.

<table class="table table-striped table-bordered table-hover" id="">
       <thead>
             <tr>
                <th>Icone</th>
                <th>Nome</th>
                <th>Categoria</th>
                <th>Tipo</th>
                <th>Level</th>
                <th>Preço</th>
            </tr>
      </thead>
      <tbody>
             <tr>
             <td style="text-align: center;"><img src=""></td>
             <td style="text-align: center;"></td>
             <td style="text-align: center;"></td>
             <td style="text-align: center;"></td>
             <td style="text-align: center;"></td>
             <td style="text-align: center;"></td>
             </tr>
     </tbody>
</table>

inserir a descrição da imagem aqui

3 Respostas 3

2

Ok, abaixo está o código:

<table class="table table-striped table-bordered table-hover" id="">
       <thead>
             <tr>
                <th>Icone</th>
                <th>Nome</th>
                <th>Categoria</th>
                <th>Tipo</th>
                <th>Level</th>
                <th>Preço</th>
            </tr>
      </thead>
      <tbody>
             <tr>
             <td style="text-align: center;"><img src="https://www.google.com.br/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png"></td>
             <td style="text-align: center; vertical-align:middle !important">teste</td>
             <td style="text-align: center; vertical-align:middle !important">teste</td>
             <td style="text-align: center; vertical-align:middle !important">teste</td>
             <td style="text-align: center; vertical-align:middle !important">teste</td>
             <td style="text-align: center; vertical-align:middle !important"></td>
             </tr>
     </tbody>
</table>
1

O bom de tabelas é que dá para alinhar verticalmente bem fácil.

Basta usar vertical-align: middle

17
  • Não foi, continua do mesmo jeito da imagem. Commented 7/12/2017 às 22:13
  • 1
    pode mandar o html dessa tabela? você quer que ele fique centralizado horizontal e verticalmente?
    – Zorkind
    Commented 7/12/2017 às 22:14
  • Tente usar o atributo valign=middle então conforme está aqui w3schools.com/tags/att_td_valign.asp
    – Zorkind
    Commented 7/12/2017 às 22:17
  • 1
    adicionei o código em uma resposta :-)
    – Zorkind
    Commented 7/12/2017 às 22:32
  • 1
    Não é uma boa pratica no entanto! apenas resolve seu problema, mas esse não é o melhor caminho, ok? o certo é verificar onde está sendo forçado esse alinhamento no topo e tentar fazer ajustes nesta classe ou talvez fazer um "override" dessa classe.
    – Zorkind
    Commented 7/12/2017 às 22:41
1

Faz um estilo para essa tabela tipo

    table tr{
       text-align: center;
    }
1

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .