How to align content in <td>?

Asked

Viewed 7,594 times

2

How do I align the content of <td> inside my table?

I know that to align horizontally I use text-align: center; //text-aling está errado.

I want it to look like Teste and 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

html css

3 answers

2


Okay, below is the code:

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

The good thing about tables is that you can align vertically very easy.

Just use vertical-align: middle

  • It wasn’t, it’s still the same as the picture.

  • 1

    can you send the html of this table? you want it to be centered horizontally and vertically?

  • Try using the attribute valign=Middle then as shown here https://www.w3schools.com/tags/att_td_valign.asp

  • Changed question and put html.

  • Missing <tr> in this table

  • forgot to type

  • tried to use the attribute valign?

  • Yes it’s still the same.

  • Which result do you expect from this table, I still haven’t quite figured out what you want.

  • OK got it, just put ! Mportant in front

  • I edited the question to improve understanding.

  • How so put ! Mportant in front?

  • 1

    added the code in a reply :-)

  • Now I understood why I needed to put the ! Mportant?

  • Because we’re modifying Bootstrap’s behavior, the ! Important makes you force the style closest to the element to be the style considered by the browser.

  • I understand now I had no idea that I had this kind of priority. Thank you.

  • 1

    It’s not a good practice though! just solves your problem, but that’s not the best way, okay? the right is to check where is being forced this alignment at the top and try to make adjustments in this class or maybe make an "override" of this class.

Show 12 more comments

0

Make a style for this table type

    table tr{
       text-align: center;
    }

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.