I'm refactoring an old site, and that maze is full of tables. We're moving to HTML5 and I need to fix a table full of
<td align="center">
code. I found a partial solution by creating a class
.centered {
text-align: center;
}
and assigning it to every TD containing text.
But this is not working on images and some other elements.
margin: auto;
won't work either.
What's the fastest way to center ALL content inside a TD?
If they're block level elements they won't be affected by text-align: center;. Someone may have set img { display: block; } and that's throwing it out of whack. You can try:
td { text-align: center; }
td * { display: inline; }
and if it looks as desired you should definitely replace * with the desired elements like:
td img, td foo { display: inline; }
You can use inline css :
<td style = "text-align: center;">
Add this code into your StyleSheet:
margin-top:80px;
you can use this code as replacement for table align
table
{
margin:auto;
}
According to the HTML5 CR, which requires continued support to “obsolete” features, too, the align=center attribute is rather tricky. Rendering rules for tables say: td elements with that attribute “are expected to center text within themselves, as if they had their 'text-align' property set to 'center' in a presentational hint, and to align descendants to the center.”
And aligning descendants is defined as so that a browser will “align only those descendants that have both their 'margin-left' and 'margin-right' properties computing to a value other than 'auto', that are over-constrained and that have one of those two margins with a used value forced to a greater value, and that do not themselves have an applicable align attribute. When multiple elements are to align a particular descendant, the most deeply nested such element is expected to override the others. Aligned elements are expected to be aligned by having the used values of their left and right margins be set accordingly.”
So it really depends on the content.
Source: Stackoverflow.com