8

我正在尝试在 jQuery 进度条内垂直和水平居中文本。我将它水平居中，但不是垂直居中。这是我目前拥有的

我的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
});
4

3 回答 3

3

通过添加管理：

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
});
于 2013-08-05T22:59:50.477 回答
2

您需要 aline-height使其垂直居中：

line-height: 35px;

小提琴

于 2013-08-05T22:32:24.910 回答
1

vertical-align当应用于块级元素时，该样式很少按照您期望的方式运行。

您在此处显示的用法效果很好......与表格单元格一起使用。它的作用类似于旧的和已弃用的 HTMLvalign属性。内联元素的行为是不同的，它的行为类似于旧的和已弃用的alignHTML 属性。

当您将其应用于框元素（例如您的 div）时，浏览器会简单地忽略它（请参阅规范）

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

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

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

您拥有的唯一可取之处是使用百分比。您可以在绝对位置中使用它line-height或作为top/使用它。bottom这是您相同代码的模型，使用百分比top将 div 向下推到中心。

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

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

文档

于 2013-08-05T23:17:40.690 回答