HTML5：footer定位（底部+居中）的探讨+div图片居中问题 (2)

解决思路2、我们让他随内容变化。当内容撑不满屏幕时。我们固定footer在底部。在屏幕装不下内容时。我们要保证footer看不见了，也就是拖动页面到最底部时才出现！

即做到永远固定于页面底部！

怎么做？

这里有篇不错的文章。点击打开參考：怎样将页脚固定在页面底部

问题4、

图片在div中怎么居中，直接上代码：

<div> <div> <!--<img hidefocus="true" src="http://www.baidu.com/img/bd_logo1.png">--> <img src="http://www.likecs.com/images/bd_logo1.png"> </div> <div> <input value="111" maxlength="100" autocomplete="off"> <input type="submit" value="百度一下"> </div> </div>#mid{ position: relative; top: 100px; width: 100%; min-width: 610px; /* 保证图片和输入框绝对居中 */ height: 200px; text-align: center; /* 仅仅对input有效，图片无效 */ float: left; } img{ display: block; width: 270px; height: 129px; margin: 0px auto; } #logo{ margin-bottom: 20px; /* 保证图片和输入框的间距 */ } #input{ display: block; width:100%; min-width: 610px; /* 保证子节点两个input不换行 */ height: 40px; padding: 0px; } #inputtext{ width: 520px; height: 22px; margin-right: 0px; padding: 6px 0px 5px 0px; font: 16px/22px arial; border: 1px #CECABC solid; /*默认边框色为灰色*/ } #button{ display: inline-block; width: 80px; height: 35px; font: 16px/22px arial; margin: 0px 0px 0px -6px; padding: 5px 0px 5px 0px; background-color: blue; border: 1px blue solid; } 总结：

1、水平居中能够使用width: 100%和text-align: center;来搞定。

2、垂直居中并实现动态变化能够使用onresize事件+js动态设置布局（position: absolute; 以及top/bottom）来实现。

3、 图片在div中居中设置：使用margin: 0px auto;

4、怎么保证左右拉伸时图片和输入框的绝对居中效果不变，设置最小宽度min-width的值一致就可以！

其它使用了display: inline-block的元素同理；