How do I center a <div> vertically?

Posted by Zhang JingChu under Silverlight on 10/19/2011 | Points: 10 | Views : 1654 | Status : [Member] | Replies : 2
How do I center a <div> vertically?

I have managed to horizontally align a Div object. Here is how I did it. I got the width and the height of the object I wanted to center (XAML CODE)

[HTML]<Grid Background="White" Height="300" Width="738" VerticalAlignment="Center" HorizontalAlignment="Center">[/HTML]

Then, in the html file that hosts the silverlight control I did this:

[HTML] <div id="silverlightControlHost" style="width:738px; height: 300px; margin-top:auto; margin-bottom:auto; margin-left: auto; text-align:center; margin-right: auto;">[/HTML]

That puts the control centered horizontally at the top of the web page.

Now, how do I center it vertically?




Responses

Posted by: Godly77 on: 10/19/2011 [Member] Starter | Points: 25

Up
0
Down
Add a parent div and Add css rule

vertical-align:middle;




Godly Mathew

Zhang JingChu, if this helps please login to Mark As Answer. | Alert Moderator

Posted by: Ndebata on: 10/20/2011 [Member] Starter | Points: 25

Up
0
Down
There is no direct way of doing this either you have to give a percentage value
margin-top:5%;

Or while loading the page try to add a javascript to check the browser height then set the margin-top value in cssText of that div, but in this case while resizing the browser , it will not align



Zhang JingChu, if this helps please login to Mark As Answer. | Alert Moderator

Login to post response