CODEWITHSUNDEEP
htmlcss
AnonyMouse
AnonyMouse

Reputation: 18630

How to get some text to appear in the middle of the screen in a div that takes up the whole screen

I was trying to get a div which would take up the whole screen and display the word Loading... on it. I wanted the text to be horizontally and vertically in the centre.

I managed to get it horizontally aligned but the text is at the top of the screen not the middle.

The code is:

<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;
}

Here it is in jsFiddle:

http://jsfiddle.net/azEaq/

Anyone know how I can get the text in the vertical middle position?

I thought vertical align would have worked but it doesn't

Upvotes: 0

Views: 442

Answers (4)

Joe Hakooz
Joe Hakooz

Reputation: 573

Change div.screenMask p to...

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

Then add a negative margin-top if you want to move it up a few pixels.

UPDATE If you don't need the red border (if it is for troubleshooting) use this...

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;
}​

Upvotes: 1

Paulo R.
Paulo R.

Reputation: 15609

Change display to table on the div, and to table-cell on the p. If you want the border around the text then simply add a span around it, and give it that border: http://jsfiddle.net/azEaq/11/

This is all perfectly valid css, and your not using tables here (bad practice, right?) - you're just changing the display to mimic tables. This technique is good when you have no predefined height on the block you want to center - as in the case you presented.

Upvotes: 0

Ashwin Singh
Ashwin Singh

Reputation: 7345

Using % positioning and then using negative margining is one solution. Using this method is much better approach as it will not break the layout on window/frame resizing.

  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;
    }

Here have a look http://jsfiddle.net/azEaq/9/ , resize the frame to see how it works.

Upvotes: 0

Luis
Luis

Reputation: 5914

This would work, just add top: 50%; and position: absolute; to the div.screenMask p class in your css, you can see the update here http://jsfiddle.net/azEaq/5/

CSS markup would look like:

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

Upvotes: 0

Related Questions