What is the correct usage of 'align' vs 'text-align'
I am trying to figure out the difference between putting an align attribute on a table cell vs using text-align css attribute. The code below shows different results in IE vs Others. In IE, the align ends up aligning every sub child, so the text 'test' is centered aligned, while in FF/Webkit this is not the case and it remains left aligned. What is the correct behavior?
<!开发者_运维技巧DOCTYPE html>
<html>
<head>
<style>
table { width: 60%; }
table td { border: 1px solid black; }
</style>
</head>
<body>
<table>
<tbody>
<tr>
<td align='center'>
<table>
<tbody>
<tr>
<td>test</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</body>
</html>
The align attribute is old-style "tag-soup" HTML, deprecated according to an official W3 document. Prefer CSS styling, as with
<td style="text-align: center;">
<!-- Content -->
</td>
Better still, give the TD a className (e.g., a semantic className like "center") and set that style in the stylesheet:
td.center {
text-align: center;
}
CSS:text-align and HTMLElement.align property works differently if there are block elements(Ex: tables) as children, so replace with caution.
See this demo below for reference.
.Container { border: solid 1px gray; width: 400px }
.Container table { border: solid 1px yellow; width: 250px }
.Container div { border: solid 1px red; width: 250px }
.CenterSelf { margin: auto }
.CenterChildren { text-align: center /* For inline elements. */ }
.CenterChildren table, .CenterChildren div
{ margin: auto /* For common block elements. Add other element selectors if necessary. */ }
.ResultTable { border-collapse: collapse }
.ResultTable td { text-align: center; border: solid 1px #ccc; padding: 0.3em }<table class="Container" align="center">
<tr><td>TABLE1</td></tr>
<tr>
<td>
<p>This is a paragraph.</p>
<table>
<tr>
<td>This is a children table.</td>
</tr>
</table>
<div>This is a div.</div>
</td>
</tr>
</table>
<hr />
<table class="Container" style="text-align: center">
<tr><td>TABLE2</td></tr>
<tr>
<td>
<p>This is a paragraph.</p>
<table>
<tr>
<td>This is a children table.</td>
</tr>
</table>
<div>This is a div.</div>
</td>
</tr>
</table>
<hr />
<div id="Container1" class="Container" align="center">
DIV1
<p>This is a paragraph.</p>
<table>
<tr>
<td>This is a children table.</td>
</tr>
</table>
<div>This is a div.</div>
</div>
<hr />
<div id="Container2" class="Container" style="text-align: center">
DIV2
<p>This is a paragraph.</p>
<table>
<tr>
<td>This is a children table.</td>
</tr>
</table>
<div>This is a div.</div>
</div>
<hr />
<div id="Container3" class="Container CenterChildren">
DIV3
<p>This is a paragraph.</p>
<table>
<tr>
<td>This is a children table.</td>
</tr>
</table>
<div>This is a div.</div>
</div>
<hr />
<div id="Container4" class="Container CenterChildren CenterSelf">
DIV4
<p>This is a paragraph.</p>
<table>
<tr>
<td>This is a children table.</td>
</tr>
</table>
<div>This is a div.</div>
</div>
<hr />
<hr />
<table class="ResultTable">
<tr>
<td> </td>
<td colspan="2">TABLE</td>
<td colspan="2">DIV</td>
</tr>
<tr>
<td>Elements</td>
<td>align="center"</td>
<td>style="text-align: center"</td>
<td>align="center"</td>
<td>style="text-align: center"</td>
</tr>
<tr>
<td>Self</td>
<td>O</td>
<td>X</td>
<td>X</td>
<td>X</td>
</tr>
<tr>
<td>inline child</td>
<td>X</td>
<td>O</td>
<td>O</td>
<td>O</td>
</tr>
<tr>
<td>inline child of inline child</td>
<td>X</td>
<td>O</td>
<td>X</td>
<td>O</td>
</tr>
<tr>
<td>block child</td>
<td>X</td>
<td>X</td>
<td>O</td>
<td>X</td>
</tr>
<tr>
<td>inline child of block child</td>
<td>X</td>
<td>O</td>
<td>O</td>
<td>O</td>
</tr>
</table>
O: Centered
X: Not centered
加载中,请稍侯......
精彩评论