0

我有一个动态宽度的标题，我希望它在中心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>

非常感谢提前！

4

1 回答 1

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

于 2012-07-11T18:46:25.020 回答