<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style>
table {border: 1px solid black; width: 500px}
.title {height: 40px}
.close {float: right}
td {text-align: center; border: 1px solid black}
</style>
</head>
<body>
<table>
<tr>
<td class="title"> Centered <span class="close">XXXXX</span> </td>
</tr>
<tr>
<td>content</td>
</tr>
<tr>
<td>content</td>
</tr>
<tr>
<td>content</td>
</tr>
</table>
</body>
</html>
在此示例中,“ XXXX”确实位于右侧,但是这导致“居中”文本稍微向左偏移.这是因为“ XXXX”仍在文档流中占据文本“居中”旁边的空间.我如何才能使“居中”与表格的其余部分完全居中？
继承和示例渲染：
rendering http://img43.imageshack.us/img43/9659/screenshoteoo.png
最佳答案
如果您绝对定位span.close,则不会占用空间,并且标题应该完美居中：
tr td {
position: relative;
}
tr td span.close {
position: absolute;
top: 0;
right: 0;
}
编辑Whoops-以前从未遇到过.通常,位置为“相对”的父母将作为位置为“绝对”的孩子的坐标系,但在< td>情况下则不然.如果您将标题和span.close包装在< div>中,使用以下代码,您应该从事业务：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4 strict.dtd">
<html>
<head>
<style>
table {border: 1px solid black; width: 500px}
.title div {
position: relative;
height: 40px;
}
td {text-align: center; border: 1px solid black}
td span.close {
position: absolute;
top: 0;
right: 0;
}
</style>
</head>
<body>
<table>
<tr>
<td class="title">
<div>Centered <span class="close">XXXXX</span></div>
</td>
</tr>
<tr>
<td>content</td>
</tr>
<tr>
<td>content</td>
</tr>
<tr>
<td>content</td>
</tr>
</table>
</body>
