Question

即使在Windows上使用CTRL +滚动鼠标按钮调整大小，我也希望将网站的所有内容都以全屏背景为中心。

网站示例：http://www.benzinga.com/

无论如何，网站的四分之三都是这样的。（Facebook，Twitter，StackOverflow，......）

我的意思是：

( Click for the Image)

如果您按下CTRL并使用鼠标上的滚动按钮，您将看到标题的背景保持全屏，但内容保持居中。

是否可以仅使用HTML和CSS执行此操作？

你能告诉我怎么样吗？

谢谢！

Answer 1

您可以在第一行添加：

body{
margin: 0 auto;
padding-left:240px;
padding-right: 240px;
}

您可以根据需要设置的填充值。 my demo

Answer 2

这就是我的意思。我自己找到了解决方案。谢谢大家。

<body>

    <header>
        <div class="pageSize" >
            <p class="left">header</p>  
            <p class="right">header</p>
        </div>
    </header>

</body>

        body {
            margin: 0;
            padding: 0;
        }

        p {
            font-size: 30px;
        }

        header {
            background: #5AFFE5;
            margin: 0;
            height: 100px;
        }



        .pageSize {
            width: 960px;
            margin: 0 auto;
        }

        .left{
            float: left;
            line-height: 0em;
        }

        .right{
            float: right;
            line-height: 0em;
        }

        div:before, div:after {
            content: "";
            display: table;
        }

        div:after {
            clear: both;
        } 

    </style>

修复了居中内容

2 个答案: