CODEWITHSUNDEEP
htmlcssfirefox
Christian Vielma
Christian Vielma

Reputation: 16005

Align <td> element in table using CSS

This might sound odd, but doing this:

<table id="MyTableID">
     <tr>
         <td align="center">
                <div id="1">
                   Content
               </div>
        </td>
     </tr>
 </table>

Aligns "Content" to the center, but:

<table id="MyTableID">
     <tr>
         <td style="text-align: center;">
                <div id="1">
                   Content
               </div>
        </td>
     </tr>
 </table>

Aligns it to the left.

I've read many posts about using margin-left: auto and margin-right: auto, and also extracted the style to a css file. Nothing of this seems to work for me.

Does anyone know why? what am I doing wrong? I'm using Firefox 19.

Upvotes: 0

Views: 208

Answers (1)

Scott Sword
Scott Sword

Reputation: 4718

I think that the misunderstanding here is that in using traditional html alignment you declare the style of alignment in the parent element.

<td align="center">
    <!-- Centered stuff in here -->
</td>

You shouldn't use text-align for aligning block-level elements. Also, when using block elements you typically want to apply that style to that specific node and then align using margins.

<td>
    <div style="width:100px;margin:0 auto"></div>
</td>

That being said throwing block elements in tables is never really a good idea. Tables are typically reserved for HTML emails and tabular data. Most modern web products are structured with divs/spans using CSS.

Upvotes: 2

Related Questions