未知大小图片在已知容器中的垂直和水平居中等

最新推荐文章于 2023-08-02 11:18:24 发布

纯和书院

最新推荐文章于 2023-08-02 11:18:24 发布

阅读量80

点赞数

本文链接：https://blog.csdn.net/shanzimedia/article/details/54783683

版权

1.未知大小图片在已知容器中的垂直和水平居中
来自：http://www.loaoao.com/lab/?offset=8&limit=8

HTML代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>未知大小图片在已知容器中的垂直和水平居中</title><title>不会自己会动的书 - Beautiful Style « 样式之美 » loaoao.com </title><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="KEYWords" content="img,align,vertical-align ,middle,css,xhtml,effect" /><meta name="DEscription" content="未知大小图片的垂直居中，一直是比较头疼的问题，前些天看到forest翻译的解决方式，顺手修改了，嘿嘿。我的写法一直是比较讨厌IE的。这回用IE的空格bug解决IE7的问题。IE5还有小问题，有空再去算IE5的。" /><meta name="author" content="aoao" /><meta content="all" name="robots" /><link rel="start" href="http://www.loaoao.com" title="Home" /><style type="text/css" media="screen"> </style></head><body><h1>未知大小图片在已知容器中的垂直和水平居中</h1><p>未知大小图片的垂直居中，一直是比较头疼的问题，前些天看到<a herf="http://www.forest53.com/tutorials/tutorials_show.asp?sortid=1&id=67">forest</a>翻译的解决方式，顺手修改了，嘿嘿。我的写法一直是比较讨厌IE的。。这回用IE的空格bug解决IE7的问题。IE5还有小问题，有空再去算IE5的。</p><div id="imgList"> <div <img src="img1.gif" alt="test" /> </div> <div <img alt="test" src="img2.jpg" /> </div> <div <img alt="test" src="img3.jpg" /> </div></div><p style="clear:both">reference <a href="http://www.forest53.com/tutorials/tutorials_show.asp?sortid=1&lid=67" title="未知大小图片在已知容器中的垂直和水平居中问题">http://www.forest53.com/tutorials/tutorials_show.asp?sortid=1&id=67</a></p><p id="copyright">Copyright © 2006 <a rel="me" href="http://www.loaoao.com/" title="Beautiful Style « 样式之美 » www.loaoao.com">aoao</a> . <a rel="license" href="http://creativecommons.org/licenses/by/2.5/" title="知识共享组织">Some rights reserved</a>.</p><script src="http://www.google-analytics.com/urchin.js" type="text/javascript"></script> <script type="text/javascript"> _uacct = "UA-600690-2"; urchinTracker();</script></body></html>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

2.高宽自适用100%,又有部分高宽固定的例子
来自：http://www.loaoao.com/lab/?offset=8&limit=8

HTML代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>X-Links 一个高宽自适用100%,又有部分高宽固定的例子</title><meta http-equiv="Content-Type" content="text/html;charset=utf-8" /><meta name="KEYWords" content="layout,auto,100,css" /><meta name="DEscription" content="本来是以前一个朋友要做收藏夹让我抄的,live的方式不错...只在一屏显示全部内容,部分内容要固定高宽,所以用了比较垃圾的方式...比如把IE骗进乱七八糟木模式(Quirks Mode)。" /><meta name="author" content="aoao" /><meta content="all" name="robots" /><link rel="stylesheet" href="style/layout.css" type="text/css" media="all" /><style type="text/css"></style></head><body><div id="header"> <div id="innerHeader">一个高宽自适用100%,又有部分高宽固定的例子</div></div> <div id="sortList"> <div <ul> <li href="#">显示文件夹</a></li> <li href="#">显示标签</a></li> </ul> </div> </div> <div id="selector"> <div <h3>您的标签</h3> test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test </div> </div> <div id="xbar"></div> <div id="tools"> <div </div> <div id="status"> <div <div id="gird"> <div Mode)。</p><p>所有主布局的元素都是用position:absolute流出来body后..根据不同浏览器写不同的定位方式<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test</p> </div></div> <div id="pages"> <div <a href="#"><img src="images/f.gif" /></a> <a href="#"><img src="images/p.gif" /></a> <span>1/1 页</span> <a href="#"><img src="images/n.gif" /></a> <a href="#"><img src="images/e.gif" /></a> </div></div><div id="footer"> <div id="innerFooter">copyright 2006 loaoao.com <script src="http://www.google-analytics.com/urchin.js" type="text/javascript"></script> <script type="text/javascript"> _uacct = "UA-600690-2"; urchinTracker(); </script></div></div></body></html>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

2-1.修改后的

HTML代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>X-Links 一个高宽自适用100%,又有部分高宽固定的例子</title><meta http-equiv="Content-Type" content="text/html;charset=utf-8" /><meta name="KEYWords" content="layout,auto,100,css" /><meta name="DEscription" content="本来是以前一个朋友要做收藏夹让我抄的,live的方式不错...只在一屏显示全部内容,部分内容要固定高宽,所以用了比较垃圾的方式...比如把IE骗进乱七八糟木模式(Quirks Mode)。" /><meta name="author" content="aoao" /><meta content="all" name="robots" /><link rel="stylesheet" href="style/layout.css" type="text/css" media="all" /><style type="text/css"></style></head><body><div id="header"> <div id="innerHeader">一个高宽自适用100%,又有部分高宽固定的例子</div></div><div id="gird"> <div <p>本来是以前一个朋友要做收藏夹让我抄的,live的方式不错...只在一屏显示全部内容,部分内容要固定高宽,所以用了比较垃圾的方式...比如把IE骗进乱七八糟木模式(Quirks Mode)。</p> <p>所有主布局的元素都是用position:absolute流出来body后..根据不同浏览器写不同的定位方式 <br /> test<br /> test<br /> test<br /> test<br /> test<br /> test<br /> <br /> </p> </div></div><div id="footer"> <div id="innerFooter">copyright 2006 loaoao.com</div></div></body></html>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

纯和书院

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
未知大小图片在已知容器中的垂直和水平居中等

1.未知大小图片在已知容器中的垂直和水平居中来自：http://www.loaoao.com/lab/?offset=8&limit=8 HTML代码未知大小图片在已知容器中的垂直和水平居中不会自己会动的书 - Beautiful Style « 样式之美 » loaoao.com html body .box{ /*font-size: 195px;*/ font-size: 180px; }
复制链接

扫一扫