Question

我有一个contentplaceholder需要居中（尽可能接近绝对）到页面的中心。我遇到的问题是，当浏览器移动到不同的分辨率时，中心会被抛弃。

我尝试过使用div和表格。我已经用em单位切换了precent，但仍然没有工作。任何帮助将不胜感激。我的最终目标是让内容占位符始终位于页面的中心，无论监视器的分辨率如何

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

主代码和内容页代码

<%@ 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>

Answer 1

<html>
    <head>
        <style type="text/css">
        .outer{
            width:100%;
            border:solid 1px gray;
            padding:1px;

        }
        .inner{
            border:solid 1px gray;
            width:60%;
            margin-left:auto;
            margin-right:auto;
        }
        </style>
    </head>
    <body>
        <div class="outer">
            <div class="inner">content</div>
        </div>
    </body>
</html>

使内容占位符居中

1 个答案: