我正在重构一个旧网站,那个迷宫里到处都是桌子.我们正在转向HTML5,我需要修复一个完整的表
<td align="center">
Run Code Online (Sandbox Code Playgroud)
码.我通过创建一个类找到了部分解决方案
.centered {
text-align: center;
}
Run Code Online (Sandbox Code Playgroud)
并将其分配给每个包含TD的文本.
但这不适用于图像和其他一些元素.
margin: auto;
Run Code Online (Sandbox Code Playgroud)
也不行.
在TD内部中心所有内容的最快方法是什么?
Bil*_*ell 35
如果它们是块级元素,它们将不会受到影响text-align: center;.有人可能已经设置了,img { display: block; }并且这使它摆脱了重击.你可以试试:
td { text-align: center; }
td * { display: inline; }
Run Code Online (Sandbox Code Playgroud)
如果它看起来像你想要的那样你肯定应该用所需的元素替换*,如:
td img, td foo { display: inline; }
Run Code Online (Sandbox Code Playgroud)
根据HTML5 CR,它需要继续支持"过时"功能,该align=center属性相当棘手.表格的渲染规则说:td具有该属性的元素"预期将文本置于其自身中心,就好像它们的'text-align'属性在表示提示中设置为'center',并将后代与中心对齐."
并且对齐后代被定义为使得浏览器将"仅将那些具有'margin-left'和'margin-right'属性计算的后代与'auto'以外的值对齐,这些后代是过度约束的并且具有具有使用值的两个边距中的一个被强制为更大的值,并且它们本身没有适用的对齐属性.当多个元素要对齐特定的后代时,最深层嵌套的此类元素应该覆盖其他元素.预期对齐元素将通过相应地设置其左右边距的使用值来对齐."
所以它真的取决于内容.