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属性。内联元素的行为不同，它的行为类似于旧的和已弃用的align HTML属性。

当你将它应用于盒子元素（比如div）时，浏览器会忽略它（see the spec）

块元素中垂直对齐的选项有限。你可以：

1）使用line-height填充整个垂直空间。浏览器将垂直对齐其行内的文本。这样做的原因是它不需要额外的包装标签，因为你必须使用预定义的高度。

2）使用绝对定位。这种方法的优点是精确 - 您可以将文本完全放在您想要的位置。绝对定位也非常直观。缺点是你需要一个额外的包装标签，你必须使用预定义的高度。

你唯一的优点是使用百分比。您可以在line-height中使用它，也可以将top / bottom与绝对位置结合使用。这是一个相同代码的模型，使用百分比top将div推入中心。

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

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

文档

vertical-align - http://www.w3.org/wiki/CSS/Properties/vertical-align
vertical-align - https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align
“了解垂直对齐，或”如何（不）垂直居中内容“”在phrogz.net（8月13日访问） - http://phrogz.net/css/vertical-align/

jQuery：进度条中的中心文本

3 个答案: