頁眉和頁腳之間的中間圖像 - CSS

我想用頁眉，頁腳和圖像構建一個簡單的登錄頁面 - 正好在頁眉和頁腳之間（水平/垂直居中）。頁眉和頁腳之間的中間圖像 - CSS

頁眉/頁腳和圖片之間的空間應該是相同的，應該取決於瀏覽器窗口的高度。

圖像有固定寬度（900px）和固定高度（600px）。

胡：這是一個棘手的頁腳

我已經試過這樣的事情：

{display:block; padding:0 40px; width:900px; margin:0 auto; vertical-align:middle;}

我的html：

 <div class="fbg"> 
<div class="fbg_resize"> 
    <img src="images/image.png" width="900" alt="" /> 
</div> 
    <!--<div class="clr"></div>-->

得到它的水平居中：

.fbg_resize { margin:0 auto; padding:0 40px; width:900px;}

這裏是重要的代碼：

http://jsfiddle.net/SFWBL/

來源

2013-11-20 user3013447

頁腳是否固定在頁面的底部？（粘腳？） –

您需要向我們展示您迄今爲止嘗試使用的任何代碼，而不僅僅是要求某人爲您製作代碼 – SaturnsEye

請在您的問題中顯示包含HTML和CSS的完整代碼，最好在http：// jsfiddle.net。 –

看一看this fiddle爲基本前提，應該足以讓你開始。

HTML

<div id='header'></div> 
<div id='image'></div> 
<div id='footer'></div>

CSS

html, body{ 
    text-align:center; 
    height:100%; 
    width:100%; 
    margin:0; 
    padding:0; 
} 
#header, #footer{ 
    height:50px;  
    width:100%; 
} 
#image{ 
    height:50px; 
    width:50px; 
    margin:-25px auto 0 -25px; 
    background:grey; 
    position:absolute; 
    top:50%; 
    left:50%; 
} 
#header{ 
    background:blue; 
} 
#footer{ 
    position:absolute; 
    bottom:0px; 
    background:red; 
}

來源

2013-11-20 14:52:26 SW4

謝謝，我會試試:) – user3013447

而不是使用img的，你可以嘗試background-image爲div

html, body { 
    height: 100%; 
} 

.fbg { 
    background-image: url(http://lorempixel.com/900/600); 
    background-position: center; 
    background-repeat: no-repeat; 
    width: 100%; 
    height: 100%; 
}

瞭解改JSFiddle

來源

2013-11-20 14:53:57

謝謝，我會試試:) – user3013447

相對（百分比）位置是讓您的元素識別瀏覽器窗口大小的方法。由於他們在邊緣（頂部，左邊）工作，因此必須使用負邊距將項目移回物品高度的一半。既然你知道圖像的固定高度是600px，你需要-300px。您想提供您的圖片：

position: absolute; 
top: 50%: 
margin-top: -300px;

來源

2013-11-20 14:56:02 BriAnna

頁眉和頁腳之間的中間圖像 - CSS

回答

相關問題