Question

我这里有一个潜在的愚蠢问题。

我有一个小小的欢迎文字出现偏离中心。我通常很擅长解决我自己的CSS，但这让我非常沮丧。我已经剥离了所有额外的边距汽车和文本对齐中心以使其更清晰。实际上，您可以删除整个JS片段，并将#welcome DIV不透明度设置为1以进一步清晰。

http://jsfiddle.net/Imperative/29Aat/88/

以下是相关的CSS：

html, body {
    height: 100%;
    margin: 0 auto;
}
body {
    margin: 0;
    padding: 0;
    font-family: sans-serif;
}
#wrap {
    zoom: 1;
    position: relative;
    min-height: 100%;
    overflow: hidden;
}
#welcome {
    position: relative;
    opacity: 0;
    top: 0px;
}
#welcome h3 {
    font-family:'Alegreya SC', serif;
    font-size: 42px;
    color: rgb(230, 230, 230);
}

我明显错过了一些非常新手和非常明显的东西，但是我太接近这件事了88次迭代，我完全错过了这条船。

什么是从html，body，wrap向下级联并导致整个#welcome块向右移动？我本来期望很多职位没有任何努力集中任何东西，只有50％向右转移？什么是frack？

Answer 1

您的<nav>元素不能包含<li>个元素。你必须将它们放入<ul>：

nav
  ul
    li
    li

至于您的实际问题：您的header正在崩溃，因为它包含浮动元素。给它overflow: auto，它会调整大小以适应它们：

header.topbar {
    overflow: auto;
    /* Get rid of this: height: 80px; */
}

最后，将文字置于中心位置：

#welcome {
    text-align: center;
}

它有效：http://jsfiddle.net/29Aat/103/

Answer 2

如果我理解正确你想要标题完全在中心。但是你没有定义导航宽度。这是更新的小提琴：JSFiddle

这是我添加的内容：

nav {
    width: 100%;
}

#welcome h3 {
    text-align: center
}

Answer 3

结束了一个简单的解决方案：

#welcome {
    position: relative;
    opacity: 0;
    top: 0px;
    clear: both;
}
#welcome h3 {
    font-family:'Alegreya SC', serif;
    font-size: 42px;
    color: rgb(230, 230, 230);
    text-align: center;
}

我必须清除Welcome上的浮动，此时定位恢复正常。此时，将中心添加回H3工作正常。

固定小提琴：http://jsfiddle.net/Imperative/29Aat/102/

Answer 4

如果没有看到HTML，我首先想知道#wrap是否位于#welcome旁边，导致它偏离中心？

好的，我还在学习这个stackoverflow的东西，所以请在这里给我一些松动。话虽如此，我现在看到这个jsfiddle可以做什么。

查看html代码，在打开welcome-div之前，你从未关闭wrap-div。

你看的那个问题？我尝试关闭div标签并在css中添加text-align：center，但现在欢迎横幅消失了。

好的，一些代码修补导致了这个：

1）关闭Wrap-div标签（我很确定我设法将它放在正确的位置） 2）修改CSS库：

position: absolute;
opacity: 0;
top: 25%;
width:100%;
text-align:center;

H3正对着中心，需要一副清新的眼睛

4 个答案: