0

我试图获得一个占据整个屏幕并在其上显示单词 Loading... 的 div。我希望文本水平和垂直居中。

我设法让它水平对齐，但文本位于屏幕顶部而不是中间。

代码是：

<div id="loadingdiv" class="screenMask"><p>Loading . . .</p></div>

div.screenMask 
{ 
    position: fixed; 
    left: 0px; 
    top: 0px; 
    width: 100%; 
    height: 100%;
    overflow-y: auto;
    z-index: 1000; 
    background-color: #000000; 
    opacity: 0.7; 
    filter: alpha(opacity=70);
    text-align: center;
    font-size: 28px;
}

div.screenMask p
{
border: 1px solid red;
    color: white;
    display: inline;
    z-index: 1001;
vertical-align: middle;
}

这是在jsFiddle中：

http://jsfiddle.net/azEaq/

任何人都知道我怎样才能获得垂直中间位置的文本？

我认为垂直对齐会起作用，但它没有

4

4 回答 4

1

将 div.screenMask p 更改为...

div.screenMask p
{
border: 1px solid red;
position:absolute;
top:50%;
color: white;
display: inline;
z-index: 1001;
}​

如果要将其向上移动几个像素，请添加负边距顶部。

更新 如果您不需要红色边框（如果用于故障排除），请使用此...

div.screenMask 
{ 
position: fixed; 
left: 0px; 
top: 0px; 
width: 100%; 
height: 100%;
overflow-y: auto;
z-index: 1000; 
background-color: #000000; 
opacity: 0.7; 
filter: alpha(opacity=70);
text-align: center;
font-size: 28px;
}

div.screenMask p
{
border: 1px solid red;
color: white;
position:absolute;
height:60px;
width:100%;
text-align:center;
top:50%;
margin:-30px 0 0 0px;
}​
于 2012-07-06T03:25:42.783 回答
0

这会起作用，只需将top: 50%;和添加position: absolute;到您的div.screenMask p类中css，您可以在此处查看更新http://jsfiddle.net/azEaq/5/

CSS标记看起来像：

div.screenMask p
{
    border: 1px solid red;
    color: white;
    display: inline;
    z-index: 1001;
    top: 50%;
    position: absolute;
}​
于 2012-07-06T03:27:44.827 回答
0

使用百分比定位然后使用负边距是一种解决方案。使用这种方法是更好的方法，因为它不会破坏窗口/框架调整大小的布局。

  div.screenMask p
    {
        border: 1px solid red;
        color: white;
        display: inline;
        z-index: 1001;
        position:absolute;
        height:30px;
        top:50%;
        margin:-15px 0 0 0px;
        vertical-align: middle;
    }

这里看看http://jsfiddle.net/azEaq/9/，调整框架大小以查看它是如何工作的。

于 2012-07-06T03:28:25.947 回答
0

更改display为table上div和table-cell上p。如果你想要文本周围的边框，那么只需span在它周围添加一个，并给它那个边框：http: //jsfiddle.net/azEaq/11/

这都是完全有效的 css，而且您在这里没有使用表格（不好的做法，对吗？） - 您只是将显示更改为模仿表格。当您想要居中的块上没有预定义的高度时，这种技术很好 - 就像您介绍的情况一样。

于 2012-07-06T03:39:18.267 回答