Question

为DIV测试创建一个非常简单的网页。我有一个DIV，在我的页面顶部创建一个标题，它是固定的，所以它不会滚动页面。在这个DIV中，我有一个H1标题，我希望垂直居中，左对齐，但远离页面的左边缘一定量（20像素）。

这是我的代码：

CSS：

body {
    font-family:"Calibri";
    margin:0px;
}

div.header {
    top:0px;
    left:0px;
    width:100%;
    height:50px;
    position:fixed;
    background-color:#7fc7f4;
    border-bottom:thick double black;
    z-index:2;
}

h1 {
    color:black;
    margin-left:20px;
    font-variant:small-caps;
}

HTML

<!Doctype html>
<html>
    <body>
        <div class="header">
            <h1>Website Heading</h1>
        </div>
    </body>
</html>

当它在我的C：\驱动器上渲染时，H1文本位于我的DIV块的底部。我将文件复制到网络驱动器，然后从那里打开它。当它使用我的计算机上的同一浏览器（IE9）从网络驱动器渲染时，它将全部集中在自己的中心。

对于我的C：\驱动器，我尝试在CSS中将以下内容添加到我的H1中：

h1 {
    color:black;
    line-height:50px;
    vertical-align:middle;
    margin-left:20px;
    font-variant:small-caps;
}

在我的C：\驱动器上渲染时，这绝对没有效果。在网络上呈现，它仍然按照我想要的方式居中，就像我添加这些看似被忽略的行之前一样。我显然希望这在C：\驱动器和网络位置都是一致的，所以我知道我的页面在构建/测试和部署供所有人使用时都能正常工作。它也必须在Chrome和Firefox中保持一致。

有人想到吗？

我不确定的一件事是添加这些代码行的位置。我是否像往常一样将它们添加到H1标签中，还是将它们添加到DIV标签中？有关系吗？我试过了两个，但似乎没有什么区别。

你必须原谅我，因为我对CSS相对较新，并且我正在努力获得更好的理解。我在这里搜索了类似主题的答案，人们给出的所有建议似乎都没有起作用。所以我希望我只是缺少一些简单的东西。

Answer 1

确保其他H1边际值为0：

h1 {
    color:black;
    margin:0 0 0 20px;
    font-variant:small-caps;
}

如果您还没有HTML元素，那么您应该实现一个规范化的CSS文件来基线化。

例如，我使用http://html5boilerplate.com/

Answer 2

您正在寻找的是“线高”＆＃39;在H1元素上，下面使h1元素的行高与包含div的高度相同，使其在中间垂直对齐。

您还需要默认删除h1元素上的边距，方法是使用margin：0;

h1 { line-height:50px; margin:0; }

见这里：http://jsfiddle.net/2RtkT/1/

问题是在DIV中居中并从不同位置渲染

2 个答案: