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

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/