Centering contentplaceholders
- by gh9
I have a contentplaceholder which needs to be centered (as close to absolute as possible)
to the center of the page. The issue I am having is when, the browser moves to different resolutions the centering is thrown off.
I have tried using divs and tables. I have switched out the precent with em units, and still no workie. Any help would be greatly appreciated. My end goal is to have the contentplaceholder always be in the center of page regardless of the resolution of the monitor
<div style="width:20%"/>
<div style="width:60">
contentplaceholercode
</div>
<div style="width:20%"/>
<table>
<tr >
<td style="width:20%">
</td>
<td style="width:60>
</td>
<td style="width:20%">
</td>
</tr>
</table>
code for master and code for content page
<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Master.master.cs" Inherits="WorkRecordr.Master" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<script src="Assets/Scripts/Jqeury1.4.4.js" type="text/javascript"></script>
<title></title>
<style type="text/css">
body
{
background-color: #326598;
}
.outer
{
width: 100%;
border: solid 1px gray;
padding: 1px;
}
.inner
{
border: solid 1px gray;
width: 70%;
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body>
<div style="text-align: center">
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
</div>
<form id="form1" runat="server">
<div class="outer">
<div class="inner">
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
</div>
</form>
</body>
</html>
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="test.aspx.cs" Inherits="WorkRecordr.test" MasterPageFile="~/Master.Master" %>
<asp:Content ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
aaaaaaaaa***aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa***aaaaaaaaaaaaaaaa
</asp:Content>
