如何使正文在页面上居中？

Question

我正在尝试将 body 元素置于 HTML 页面的中心。

enter image description here

基本上，在 CSS 中，我将 body 元素设置为

display: inline-block;

，以便它的宽度与其内容一样宽。效果很好。但是，

margin: 0px auto;

不会将其置于页面中心。

有人知道如何解决这个问题吗？我希望蓝色的大方块位于页面的中心，而不是像现在这样浮动到左侧。

这是我的CSS：

body {
    display: inline-block;
    margin: 0px auto;
    text-align: center;
}

Answer 1

    body
    {
        width:80%;
        margin-left:auto;
        margin-right:auto;
    }

这适用于大多数浏览器，包括 IE。

Answer 2

同时应用 text-align: center;在 html 元素上，如下所示：

html {
  text-align: center;
}

更好的方法是使用一个内部容器 div，它将被集中，而不是主体。

Answer 3

您必须指定正文的宽度，使其在页面上居中。

或者将所有内容放在div中并居中。

<body>
    <div>
    jhfgdfjh
    </div>
</body>

div {
    margin: 0px auto;
    width:400px;
}

Answer 4

利用弹性布局是另一种选择。添加到您的 CSS：

html {
    display: flex;
    justify-content: center;
}

在 Chrome、Edge、Firefox 中测试。

更多信息可以在 MDN 的参考文献和在线教程主机中找到（这个看起来很方便，因为它是围绕弹性布局中的容器/项目角色组织的）。

Answer 5

对于那些知道宽度的人，你可以做类似的事情

div {
     max-width: ???px; //px,%
     margin-left:auto;
     margin-right:auto;
}

我也同意不要在正文上设置

text-align:center ，因为它可能会弄乱代码的其余部分，并且你可能必须在当时或之后在很多东西上单独设置 text-align:left未来。

Answer 6

我尝试将两个有用答案的优点结合起来：

addEventListener("DOMContentLoaded", (event) => 
            {
                var toc = document.getElementById('toc');
                var headings = [].slice.call(document.body.querySelectorAll('h1, h2, h3'));
                var prevLevel = 0
                var parent = toc;
                headings.forEach(function (heading, index) 
                {
                    var level = parseInt(heading.tagName[1]);
                    if(prevLevel < level) 
                    {
                        var newParent = document.createElement("ol");
                        parent.appendChild(newParent);
                        parent = newParent;
                    }
                    else if(prevLevel > level && parent.parentNode !== toc)
                    {
                        parent = parent.parentElement;
                    }
                    
                    var anchor = document.createElement('a');
                    anchor.setAttribute('name', 'toc' + index);
                    anchor.setAttribute('id', 'toc' + index);

                    var listEntry = document.createElement('li');
                    var link = document.createElement('a');
                    link.setAttribute('href', '#toc' + index);
                    link.textContent = heading.textContent;

                    listEntry.appendChild(link);
                    parent.appendChild(listEntry);
                    heading.parentNode.insertBefore(anchor, heading);
                    
                    prevLevel = level;
                });
            });

PS：不确定 ol > ol 是否合法，技术上可能需要 ol > li > ol 但它有效:)

如何使正文在页面上居中？

问题描述投票：0回答：6

6个回答

最新问题

如何使正文在页面上居中？

问题描述 投票：0回答：6

6个回答

最新问题

问题描述投票：0回答：6