-3

誰でもこのコードを追加して、ヘッダーとフッターを中央に配置できますか。左右の余白は同じにする必要があります

.newheader
{
    background:#000;
    height:30px;
    left:0;
    position:fixed;
    width:100%;
    top:0;
}
.newfooter
{
    background:#000;
    bottom:0;
    height:30px;
    left:0;
    position:fixed;
    width:100%;
}
4

4 に答える 4

1

ページの中央に要素を配置する標準的な方法は、全幅よりも小さい幅を定義し、そのマージンを auto で設定することです。

例えば

.newheader {
    width:960px; /* less than 100% since 100% has no margin */
    margin : 0 auto /* top and bottom margin = 0 left and right auto*/
}

例で更新

ページに基づく例へのリンクを次に示します。リンク

フルスクリーン版のリンク

于 2012-07-24T19:19:57.830 に答える
0

text-align:center;newHeader と newFooter の両方に追加するだけでよいと思います。既に幅が 100% であるため、ブラウザーの 100% を占めるため、サイド マージンはありません。

<style type="text/css">
.newheader {
    background:#FFF;
    top:0;
    height:30px;
    position:fixed;
    width:100%;
    text-align:center;
}

.newfooter {
    background:#CCC;
    bottom:0;
    height:30px;
    position:fixed;
    width:100%;
    text-align:center;
}
</style>

<div class='newHeader'>
   Test Header
</div>
<div>
    <p>Content</p>
</div>
<div class='newFooter'>
   Test Footer
</div>
于 2012-07-24T19:25:25.237 に答える
0

テキストのように、ヘッダーとフッターのコンテンツを中央に配置するという意味ですか?

.newheader                /* remove width: 100% */
{
    text-align: center;   /* this line */
    background:#000;
    height:30px;
    left:0;          /* this is setting the div all the way to the left */
    position:fixed;             
    top:0;
}

これを試して

.newheader
{
    background:#000;
    height:30px;    
    position:relative;       
}

.header_container
{
    top: 0px
    position: fixed;
    text-align: center;
    width: 100%;
}

ヘッダーをコンテナに入れます。

于 2012-07-24T19:16:21.543 に答える
0

元の投稿のコメントごと:.newheader { background:#000; height:30px; left:5%; position:fixed; width:90%; top:0; }投稿者が行った試みです。

幅が 90% の場合、次のようにこのヘッダーを中央に配置できます。

.newheader {
    /*remove position: fixed; left: 5%; top: 0; */
    width:90%;
    margin: 0 auto; /* this centers it */
    height: 30px;
    background: #000;
}

結果のサンプルJSFiddleを次に示します。

于 2012-07-24T19:51:14.100 に答える