个人中心
gpt4 book ai didi

html - margin : 0px auto VS margin: -50%

转载 作者：搜寻专家 更新时间：2023-10-31 22:03:29 25 4
gpt4 key购买 nike

我正准备为一个新的小元素编写一些模板 - 我只是想知道一件事:

如果我希望我的整个页面内容位于一个居中的列中，宽度为 - 比方说 - 800 像素，通常的做法是这样(至少，这是我一直这样做的方式):

<html>
    <head>
        <style>
            body {
                text-align: center; /* IE6 */
            }

            #wrapper {
                margin: 0px auto;
                width: 800px;
                background-color: #eee; /* to see it better */
                text-align: left; /* IE6 */
            }
        </style>
    </head>
    <body>
        <div id="wrapper">
            ... content ...
        </div>
    </body>
</html>

现在，有另一种方法可以做完全相同的事情，但使用 margin: -50%;(或固定值，在本例中为 margin: 400px;)，像这样:

<html>
    <head>
        <style>
            body {
                margin-left: 50%;
            }

            #wrapper {
                margin-left: -400px;
                width: 800px;
                background-color: #eee; /* to see it better */
            }
        </style>
    </head>
    <body>
        <div id="wrapper">
            ... content ...
        </div>
    </body>
</html>

我的问题是 - 这两种方法中的一种比另一种有什么优势吗？还是劣势？是否存在用于将主列居中的通用“最佳解决方案”？

最佳答案

margin:0 auto; 将确保元素两侧的空间量相等。

margin-left:50%; 是相对于父级的。例如，如果容器的宽度为 1000 像素，则子元素的左边距为 500 像素。但是，这不会使元素居中，它会将它的左侧放在中间 - 除非您像示例中那样在子元素上使用固定值来破解它。

通常，当您像您的情况一样处理包装器时，margin:0 auto; 是最简单和最灵活的解决方案。在其他情况下，您可能会发现使用百分比或固定值会更好(例如， float 内容时)。

关于html - margin : 0px auto VS margin: -50%，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/10893647/

25 4 0
文章推荐： php - Mediawiki API 扩展中的错误或无效 token
文章推荐： android - Cordova 通知中的多行消息
文章推荐： sqlite - 在调用 swift 中读取 blob 数据额外参数字节
文章推荐： php - 使用yii2的crud生成器后如何查看页面
搜寻专家
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com