5

我在这里有一个可能很愚蠢的问题。

我对一段偏离中心的欢迎文本感到不安。我通常很擅长解决我自己的 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% 之外，没有任何努力集中在任何事情上？什么鬼？

4

4 回答 4

3

您的<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/

于 2013-03-07T23:21:00.570 回答
2

如果我理解正确，您希望标题完全位于中心。但是您没有定义导航宽度。这是更新的小提琴：JSFiddle

这是我添加的内容：

nav {
    width: 100%;
}

#welcome h3 {
    text-align: center
}
于 2013-03-07T23:18:50.527 回答
1

最终成为一个简单的解决方案：

#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/

于 2013-03-07T23:27:53.470 回答
0

在没有看到 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;
于 2013-03-07T23:05:42.587 回答