logo标签列表

jQuery：如何在进度条中居中文本

jquerycss
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
});
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
});
2
您需要设置一个line-height来使其垂直居中：
line-height: 35px;

FIDDLE

1
有没有一种方法可以在不使用硬编码数字的情况下完成这个任务？如果我必须使用魔术数字，我宁愿在“#label”内部使用'margin-top'。 - Caner
@Caner - 其实并没有一个固定的方法。你可以将行高设置为百分比，添加边距、填充或其他任何方式，然后还有JavaScript和CSS3的calc()函数，可能也可以用来垂直对齐。使用CSS进行垂直对齐一直比水平对齐更加困难。 - adeneo
1

当应用于块级元素时，vertical-align 样式的行为往往与您所期望的不同。

您在此处展示的用法在表格单元格中可以正常工作。它的行为类似于旧的和已弃用的 HTML valign 属性。但是当应用于内联元素时，它会像旧的和已弃用的 align HTML 属性一样起作用。

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

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

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

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

你唯一的救命稻草就是使用百分比。你可以将其用于line-height中，也可以与绝对位置的top/bottom结合使用。这是一个模拟你现有代码的示例，使用了百分比的top将
推向中心。
#label {
    width: 100%;
    top:2.5%;
    position:absolute;
}

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

文档

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接