5

私はここで潜在的に愚かな質問があります。

ウェルカムテキストのブロックが中心から外れてくるフィドルがあります。私は通常、自分のCSSのトラブルシューティングに優れていますが、これは私を絶対にバタバタさせています。これを明確にするために、余分な余白の自動とテキスト整列の中心をすべて取り除きました。JSセグメント全体を実際に削除し、さらに明確にするために#welcomeDIV不透明度を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;
}

ウェルカムのフロートをクリアする必要がありましたが、その時点でポジショニングは正常に戻りました。その時点で、センターを H3 に戻すと、期待どおりに機能しました。

固定フィドル: http://jsfiddle.net/Imperative/29Aat/102/

于 2013-03-07T23:27:53.470 に答える
0

HTML を見ないと、まず #wrap が #welcome の横にあり、中央からずれているのではないかと思います。

わかりました、私はまだこのスタックオーバーフローのことを学んでいるので、ここでの操作に少し余裕を持ってください. そうは言っても、この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 に答える