Question

我需要将负载条的百分比定位到水平中心和垂直中间，看起来不正确。这是我的代码：

<div style="text-align:center; vertical-align: middle; width: 100%; height: 50px; background-color: #CCC;">
     <div style="width: 40%; height: 50px; background-color:#0C0;"></div>
     <span>50%</span>
</div>

the jsfiddle。

Answer 1

您可以使用'line-height'css属性垂直对齐div内的文本。 'line-height'属性应设置为div的高度。例如：

行高：50px;

看看它是否有效。

Answer 2

你需要结合......

您应该通过absolute定位将绿色元素从文档流中取出。
您应该使用line-height属性将文本转移到垂直中心位置。
使用z-index属性协商任何分层问题。

所以你的HTML会变成这样：

<div style="text-align:center; vertical-align: middle; width: 100%; height: 50px; background-color: #CCC;">
 <div style="position:absolute; width: 60%; height: 50px; background-color:#0C0;"></div>
 <div style="position:relative;z-index:1;line-height:50px">50%</div>

这里是example fiddle。

我如何在div中定位文本？

2 个答案: