Question

我有动态宽度的标题，我希望它位于table的中心，但inline-block无法正常工作，inline将其置于td的中心{1}}，不是所有的桌子，我怎样才能在桌子的中心做到？以下是此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

中心对齐动态宽度表标题

1 个答案: