页眉和页脚之间的中间图像 - 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

回答

相关问题