-2

Webページのdiv要素（この場合はフッターdiv）を中央に配置しようとしましたが、左側にとどまるように主張しています。

何が悪いのかよくわかりません...何かアイデアはありますか？前もって感謝します。

HTML：

<div id='main'>
</div>

<div id='footer'>Centered Text</div>​

CSS：

* {
    padding: 0;
    margin:  0;
    font-size:   12px;
}

body {
    font-family: helvetica, serif;
    font-size:   12px;
    overflow-y:scroll;
}

#main {
    border: 1px solid #bbbbbb;
    margin: 3% 5%;
    padding: 10px 10px;
}

#footer {
    font-size: 75%;
    margin: 0px auto;
    position: absolute;
    bottom: 0px;
}

</ p>

http://jsfiddle.net/DjPjj/2/

4

2 に答える 2

2

http://jsfiddle.net/DjPjj/13/

これを試して：

#footer {
    font-size: 75%;
    width: 100%;
    position: absolute;
    bottom: 0px;
    text-align: center;
}

フッターは絶対に配置されているため、親コンテナーに対してどの幅を取るかを指定する必要があります。次に、text-alignを使用して、テキストをその中の中央に配置できます。

別の例を次に示します。http：//jsfiddle.net/DjPjj/17/

これは、絶対位置にある要素内のボックスを中央に配置します。margin: 0 auto内箱は完全に配置されていないため、を使用して中央に配置できます。

#footer {
    font-size: 75%;
    width: 100%;
    position: absolute;
    bottom: 0px;
}

#footerInner {
  margin: 0 auto;
  width: 300px;
  background-color: #ddd;
  text-align: center;
}

これは、内側の要素が親に対して中央に配置された新しいコンテナを提供するため、より柔軟です。</ p>

于 2012-05-13T14:04:41.037 に答える
1

中心にならない理由は、positon: absolute;.

これは、コンテンツがはみ出してもフッターが常にページの下部にあることを意味することに注意してください。重なります。ページの下部に配置したい場合は、その上にあるコンテナーの最小高さを 100% に設定してから、負の margin-top を処理して、position: abosolute;

http://jsfiddle.net/4fuk7/1/

中央揃えのテキストがどのように上書きされるかに注目してください。

常に一番下にあるものを探しているなら、これはうまくいくでしょう http://jsfiddle.net/4fuk7/3/

申し訳ありませんが、最後のものは一番上にスクロールします。これはそうではありませんが、設定したマージンの周りに適切に配置するには、少しいじる必要があります。http://jsfiddle.net/4fuk7/9/ http://www.tlunter.com/Layout 2/ は、私が似たようなことをした場所です。必要に応じて参照できます。

于 2012-05-13T14:06:57.267 に答える