web-dev-qa-db-ja.com

フッターの中央をページの下部にするにはどうすればよいですか？

フッターをページの下部に中央揃えできない。これが私のコードです

footer {
background-color: #FFF;
position:fixed;
bottom: 0px;
width: 400px;
text-align: center;
}
<footer align="center">
    <p>March 25, 2</p>
</footer>
htmlcsswebcenterfooter
11
Diallo Dickerson

幅を100％に設定するだけ

width: 100%;
16
Nasir Mahmood

Shabbir Lakdawala 回答はオプションの1つですが、floated内にfooter要素がある場合は、 'div'ラッパーを追加するだけです

html

<div class="footerWrap">
    <div class="footer">
      <div class="footerContent">
        <p>Lorem Ipsum dolor</p>
      </div>     
    </div>
</div>

cSS

.footerWrap {
    width:100%;
    position:fixed;
    bottom: 0px;
}
.footer {
    width:400px;
    margin:auto;
}
.footerContent {
    float:left;
    width:100%;
    background-color:#555;
    padding:20px 0;
}
.footer p {float:left; width:100%; text-align:center; }

動作中 デモ

2
jhunlio

または、フッターにコンテナーを指定して、次のコードを適用できます。

HTML：

<footer>
    <div class="footer">
    lorem ipsum dolor
    </div>
<footer>

CSS：

footer{
    bottom: 0;
    position: fixed;
    width: 100%;
}

.footer {
    background: blue;
    height: 100px;
    margin: auto;
    width: 400px;
    text-align:center;
    padding:10px;
    color:#ffffff;
}

Fiddle： http://jsfiddle.net/qdVbR/174/ へのリンク

0
Shabbir Lakdawala