2012-07-11 91 views
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> 

非常感謝提前!

+0

這樣你想http://jsfiddle.net/Q9EDU/ – SVS 2012-07-11 18:41:39

+0

均田,問題是,我有一個背景的標題,所以它不能有充分的寬度,因爲它不適合BG,明白嗎? – 2012-07-11 18:47:16

+0

使字幕顯示:block; – SVS 2012-07-11 18:49:27

回答

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

+0

我不能用全寬有它,只是居中對齊,因爲我打算使用背景知道嗎? 非常感謝專家! – 2012-07-11 18:49:52

+0

我不能全寬,只是中心對齊,因爲我打算使用背景知道嗎? – 2012-07-11 18:50:13

+0

如果長度爲動態,我如何根據長度更改邊距? – 2012-07-11 18:53:02