views:

142

answers:

4

Hello all, Somebody please help me how to place the content page in center of the page.I am trying to do using css class but content doesn't have css property.In my application when i am clicking on LOGIN DETAILS , that page should open in the center but opening under the menu item. Here is my code:

A: 

Put your contentplaceholder in a <div> and then center the div?

TheTXI
A: 

Content place holder is a virtual container, it doesn't effect your page's visualization. Think it as a LiteralControl. So you should design your contentplaceholder's surrounding elements.

Canavar
+1  A: 

As the other posters have said, you will need to use CSS to position the div in the center of the screen.

Here's some quick code to help you with this.

div#centered {
    background-color: #eee; 
    border: 1px solid #ddd; 
    position: absolute; 
    left: 50%; 
    top: 50%;  
    width: 400px;  
    height: 300px; 
    margin-left: -200px;  
    margin-top: -150px;
}

And it's usage:

<div id="centered"><!-- your login stuff --></div>
steve_c
+1  A: 

The auto value on the left and right margins work to center the div horizontally. Unfortunately this doesn't work vertically, so you may need to set this manually or detected the screen resolution dynamically.

<div id="loginBox">
..login form here
</div>

<style>
#loginBox {
  width:400px;
  height:300px;
  margin:400px auto 0px auto;
}
<style>
Macka