Question

我的网站上存在布局问题..

我开发使用MVC ..

当我最小化它或使用较小的分辨率时，布局会变得有点奇怪。

我的电脑使用1366 x 768分辨率..

如果我没有最小化它，那就没关系......

但是当我试图让浏览器变小时，右边有一个间隙..

我想把它集中在www.bluenile.com网站..

谢谢..

图片：

在我最小化之前

：http://i.imgur.com/aQyoAYH.png

我最小化后：http://i.imgur.com/9cWtl13.png

谢谢你们！

这是我的布局：

<body class="body">
<table class="wrapper" style="width: 100%;">
    <tr>
        <td>
            @Html.Partial("Header")
            <table class="main" width="1000" border="0" cellspacing="0" cellpadding="0" style="border: 0px;"
                align="center">
                <tr>
                    <td colspan="3">@Html.Partial("TopMenu")
                    </td>
                </tr>
                <tr>
                    <td colspan="3" width="100%">@RenderBody()
                    </td>
                </tr>
                <tr>
                    <td class="sidepadding">
                    </td>
                    <td>@Html.Partial("ResourcesCentre")
                    </td>
                    <td class="sidepadding">
                    </td>
                </tr>
                <tr>
                    <td class="sidepadding">
                    </td>
                    <td>@Html.Partial("Networks")
                    </td>
                    <td class="sidepadding">
                    </td>
                </tr>
            </table>
            <table width="1015" border="0" cellspacing="0" cellpadding="0" style="border: 0px;"
                align="center">
                <tr>
                    <td style="width: 5px; height: 1px;">
                    </td>
                    <td>@Html.Partial("Footer")
                    </td>
                    <td style="width: 5px; height: 1px;">
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>

这是我的风格：

    .body
    {
background-image: url('/Content/images/Diamond_Background_Blue.png');
    font-size: 0.75em;
    font-family: "Gotham Book", "Gotham Bold", "Gotham Light", "Gotham Thin", Verdana, Tahoma, Arial, Helvetica, Sans-Serif;
    margin: 0;
    padding: 0;
    color: #696969;
}

    .wrapper
    {
margin: 0 auto 0 auto;
}

更新

检查我的css之后，导航上有一个css代码让它运行： position：relative ..我删除了那段代码，现在布局已经好了..

谢谢你们的帮助.. :)

Answer 1

使元素居中的技巧是赋予它auto的宽度和左右边距。例如。 margin: 0 auto。如需更多帮助，请发布代码示例。

Answer 2

在CSS中，只需在页面，容器，包装器等上添加此行。

{
  margin:0 auto; 
}

这是一个参考How to Center a Website With CSS。如果要将其测试为不同的屏幕分辨率，可以对其进行测试here。希望这对你有所帮助。：）

Answer 3

将margin: 0 auto添加到正文并为其提供width: 80%或其他内容。要使页面流畅，请使用%中的宽度而不是px

DEMO

即使在最小化时如何制作布局中心？

3 个答案: