javascript - 居中对齐动态宽度表的标题

Question

我有一个动态宽度的标题，我想把它放在 table 的中心，但是 inline-block 不能正常工作，inline 使其位于 td 的中心，而不是所有表格的中心，如何使其位于表格的中心？这是此 html 的示例:

<table class="hours-table" style="width: 100%;" border="0"><caption>Title</caption>
<tbody>
<tr>
<td>1_1</td>
<td>1_2</td>
<td>1_3</td>
<td>1_4</td>
<td>1_5</td>
</tr>
<tr>
<td>2_1</td>
<td>2_2</td>
<td>2_3</td>
<td>2_4</td>
<td>2_5</td>
</tr>
<tr>
<td>3_1</td>
<td>3_2</td>
<td>3_3</td>
<td>3_4</td>
<td>3_5</td>
</tr>
<tr>
<td>4_1</td>
<td>4_2</td>
<td>4_3</td>
<td>4_4</td>
<td>4_5</td>
</tr>
<tr>
<td>5_1</td>
<td>5_2</td>
<td>5_3</td>
<td>5_4</td>
<td>5_5</td>
</tr>
</tbody>
</table>

非常感谢!

Answer 1

如果您希望它在垂直和水平方向上都居中对齐，您可以使用以下 CSS:

table { position: relative; }
caption {
    ​position: absolute;
    top: 50%;
    left: 50%;
    margin: -0.5em -10px; /* Change the -10px part depending on length of title */
}​

jsFiddle

如果你只想让它水平对齐(在表格的顶部，你可以使用:

caption { text-align: center; }

jsFiddle

编辑:这是一个解决方案，它允许在居中的标题后面设置背景，但也在标题的文本部分后面创建一个白色背景:

HTML

<caption>Title</caption>

CSS

div { background: url('background_image.jpg') repeat; }
caption {
    text-align: center;
    background: rgba(0,0,0,0);
}
span { background: white; }

JS

$(function() {
    var caption = $('caption');
    caption.html('<span>' + caption.html() + '</span>');
    });​

jsFiddle