如何集中内容

Question

需要一些关于如何像网站一样设置布局的帮助。

例如：http://www.rachaelray.com/food.php

此网站内容似乎位于大白框的中央，背景为浅蓝色。

我的网站会简单得多。

我真的不知道如何为我的母版页设置这样的（上面的网站）布局。

以下是我到目前为止所做的事情： -

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <asp:ContentPlaceHolder id="head" runat="server">

        <style type="text/css">
         #main
          {

           }      
         .left
         {
            margin:0 auto;
            float:left;
            width:20%;
          }
         .right
         {
            margin:0 auto;
            float:right;
            width:20%;
          }
        .content
         {

            width:100%;

          }
        .footer
        {
         padding:5px;
         background:black;
         color:white;
        }
            .wrapper 
            {
                margin: 0 auto;
                width: 700px;
            }
            .auto-style1 {
                width: 466px;
                image-orientation:auto;
            }
            .auto-style2 {
                width: 466px;
                height: 23px;
            }
            .auto-style3 {
                width: 100%;
                border: 1px solid #000000;
            }
        </style>

    </asp:ContentPlaceHolder>
</head>
<body>
    <form id="form1" runat="server">
    <div id="left" class="left" > </div>
    <div id="cont" class="wrapper">
        <table class="content">
         <tr>
            <td class="auto-style1">
            <asp:Image ID="Logo_MaduDTrading" runat="server" ImageUrl="~/Images/BeforeLogin/Logo_MaduDTrading.jpg" />
            </td>
         </tr>
         <tr>
            <td class="auto-style2">

               </td>
         </tr>
         <tr>
            <td class="auto-style1">
            <asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server"> 

            </asp:ContentPlaceHolder>
            </td>
         </tr>
         <tr>
            <td class="auto-style1">

                &nbsp;</td>
         </tr>
         <tr>
            <td class="auto-style1">

                &nbsp;</td>
         </tr>
       </table>
    </div>
     <div id="right" class="right"></div>
    </form>
</body>
</html>

有任何想法/建议吗？

先谢谢你。

Answer 1

当我想对网站进行居中对齐时，我使用div标签作为主页内容并设置宽度，左右自动边距。您还可以将主体背景颜色设置为与div标签不同，以在您提供的示例站点中创建效果。例如。

母版页中的Html：

<div class="page">
    Page content here
</div>

头部或单独的.css文件中的Css：

.page {
    margin-left: auto;
    margin-right: auto;
    width: 1000px;
}

您可以在屏幕中央添加一个上下边距的影响。随意提出任何问题。

Answer 2

在母版页中创建母版页和/或ContentPlaceHolder控件时，您应该使用自适应网页设计技术。这将解决页面居中问题和对象的宽度。这也是您的示例网站如何创建其布局。

如何集中内容

正如Jonathan Bick所提到的，最常见的内容集中方法是在任何给定的div上将左右边距设置为自动。这可以通过以下方式完成：

.someClass{margin:0 auto;}

以内容为中心时的常见错误

以下任何一项都可以阻止您的内容正确居中：

忘记设置宽度。
- 必须明确设置任何居中元素的宽度。这可以使用百分比的窗口，像素或任何其他 CSS Unit of measurement 来完成。
将div放置在设置为向左或向右浮动的容器中。
- 这样做会导致包含的div忽略其width属性。测试 here.

注意：这些只是我的头脑，所以当我想到它们时，我会回来添加更多。

响应式网页设计说明

响应式网页设计用于创建一个网站，该网站会自动调整其元素，以便为当前屏幕尺寸提供最佳布局。最棒的是，这可以完全用CSS和HTML完成。您可以在以下链接中找到所需的一切...

的 StackOverflow - How to make an ASP.NET drop down list responsive?

这绝对可以让你指出正确的方向。该链接还引用了我书签中“响应式设计”文件夹中的一些优秀教程。

使用谷歌浏览器的“检查元素”

Google Chrome（以及大多数其他浏览器）都有一个名为 Inspect element 的工具。当您右键单击网站中的元素时，在上下文菜单的底部，您将看到 Inspect元素选项。单击此按钮将启动一个工具，分析任何渲染元素的属性，并使用颜色编码，图像，标签等显示它们。该工具非常好，可以帮助您确定图像不居中的原因...... < / p>

在这里，您可以看到当我检查Stack Overflow的徽标时会发生什么。

<强>此外...

您可以使用样式窗口（位于 Elements 面板的右下角）快速测试新样式。

请注意，我将样式部分中徽标的边框更改为solid 20px red，新样式将反映在浏览器窗口中。当然，这只是暂时的，因此您无需担心意外破坏您的代码。

如何分配/设置主页面ASP.Net的布局

2 个答案:

如何集中内容

响应式网页设计说明

使用谷歌浏览器的“检查元素”