html - 居中元素时的问题

标签 html css centering

所以我回到了基础,试图弄清楚我做错了什么......

如果这是我的网页:

<!doctype html>
<html>
<head>
<style>
    body
    {
        text-align: center;
    }

</style>
</head>

<body>
<header>
    <h1>Hello</h1>
</header>
</body>
</html>

它居中很好,但是如果我添加样式

width: 960px;

对于正文样式,页眉元素左对齐,页眉元素('Hello')的内容仅在页眉元素本身内居中。

我不知道这是为什么,也不知道如何解决。

最佳答案

你做的完全错了,让 body 保持原样,使用固定宽度的 div 比如说 960px 并使用 margin: auto; 使其居中,所以标记/样式就像

<body>
   <div class="wrap"></div>
</body>

html, body { /* Irrelevant here */
   width: 100%;
   height: 100%;
}

div.wrap { /* This will make your div align center */
   width: 960px;
   margin: auto;
}

关于html - 居中元素时的问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16876869/

相关文章:

html - 如何让图像小部件居中显示在我的 WordPress 网站的页脚中?

html - 在屏幕中间居中一个 'div',即使页面向上或向下滚动?

html - CSS居中幻灯片图像

javascript - 将变量名作为 id 传递

html - 如何在 CodeIgniter 中使用带有第二个参数的 strip_tags?

html - Bootstrap 轮播中图像顶部的表格

javascript - JS文件中的CSS代码

html - 如何使用 CSS 将内联元素置于 block 元素中?

html - 如何限制悬停宽度过渡,使对象不会超出父标签?

css - 如何只将水平滚动条向右移动