工作的缘故要让一个图片在未知高度的页面垂直居中。之前一直知道怎么操作但没机会实际应用。这次试了一下,勉强过关。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>未知高度垂直居中</title> <style type="text/css"> body{margin:0;padding:0;} body,html{height: 100%;} img{border:0;} #outer{height: 100%;overflow: hidden; position: relative;width: 100%; } #outer[id] {display: table; position: static;}/*for FF*/ #middle{position:absolute;top:50%;} #middle[id] {display: table-cell; vertical-align: middle; position: static;}/*for FF*/ #inner{position: relative;top:-50%;width: 379px;margin: 0 auto;display:block;background:transparent url(http://www.cargoo.net/p/f/something.jpg) no-repeat 0 0;height:216px;} </style> </head> <body> <div id="outer"> <div id="middle"> <a id="inner" href="http://blog.fashion-pad.com" title="功能建设中"><span style="display:none;">网站功能建设中...</span></a> </div> </div> </body> </html> [Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]
转载于:https://www.cnblogs.com/color-fever/archive/2008/10/21/1316115.html
相关资源:各显卡算力对照表!