jQuery：進度條中的中心文本

Question

我試圖垂直居中文本垂直& jQuery進度條內。我管理水平居中但不垂直。 Here is what I have at the moment

我HTML：

<div id='progressbar'><div id='label'>My text</div></div> 

我CSS：

#progressbar { 
    width: 80%; 
    text-align: center; 
    overflow: hidden; 
    position: relative; 
    vertical-align: middle; 
} 

#label { 
    float: left; 
    width: 100%; 
    height: 100%; 
    position: absolute; 
    vertical-align: middle; 
} 

我JavaScript：

$("#progressbar").progressbar({ 
    value: 50 
}); 

Answer 1

你需要一個line-height得到它垂直居中：

line-height: 35px; 

FIDDLE

Answer 2

加入自選：

line-height: 200%; 

結果：http://jsfiddle.net/GYW73/1/

我HTML：

<div id='progressbar'><div id='label'>My text</div></div> 

我CSS：

#progressbar { 
    width: 80%; 
    text-align: center; 
} 

#label { 
    width: 100%; 
    float: left; 
    line-height: 200%; 
} 

我JavaScript：

$("#progressbar").progressbar({ 
    value: 50 
}); 

Answer 3

的vertical-align風格，當應用於塊級元素，很少表現你所期望的方式運行。

您在這裏顯示的用法很好地適用於表單元格。它的行爲就像舊的和不贊成的HTML valign屬性。內聯元素的行爲不同，其行爲與舊的和不贊成使用的HTML屬性類似。

當您將它框元素（如您的DIV），瀏覽器會忽略它（see the spec）

您的垂直對齊選項塊中的元素是有限的。您可以：

1）使用行高填充整個垂直空間。瀏覽器將在其行內垂直對齊文本。這樣做的好處是它不需要額外的包裝標籤，因此您必須使用預定義的高度。

2）使用絕對定位。這種方法的優點是精確 - 您可以將正文置於您想要的位置。絕對定位也非常直觀。缺點是你需要一個額外的包裝標籤，你必須使用預定義的高度。

你擁有的唯一的救恩是使用百分數。您可以在line-height中使用它，也可以將其作爲top/bottom結合絕對位置使用。下面是你的相同代碼的模型，使用百分比top將div推入中心。

#label { 
    width: 100%; 
    top:2.5%; 
    position:absolute; 
} 

的jsfiddle：http://jsfiddle.net/bLdgN/5/

文檔

• vertical-align在W3 - http://www.w3.org/wiki/CSS/Properties/vertical-align
• vertical-align在MDN - https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align
• 「瞭解垂直對齊，或「如何（不）垂直中心內容」」在phrogz.net（在8/13訪問） - http://phrogz.net/css/vertical-align/