CSS设置未知大小图片在已知大小容器水平垂直居中

ttx9n · 发表于 2014-5-22 17:13:35

这篇文章主要介绍了通过CSS设置未知大小图片在已知大小容器水平垂直居中，需要的朋友可以参考下
复制代码代码如下:
<!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" xml:lang="cn" >
<head>
<title>未知大小图片在已知大小容器水平/垂直居中</title>
<style type="text/css">
.box {
/*非IE的主流浏览器识别的垂直居中的方法*/
display: table-cell;
vertical-align:middle;
/*设置水平居中*/
text-align:center;
/* 针对IE的Hack */
*display: block;
*font-size: 175px;/*约为高度的0.873，200*0.873 约为175*/
*font-family:Arial;/*防止非utf-8引起的hack失效问题，如gbk编码*/
width:200px;
height:200px;
border: 1px solid #EEE;
float:left;
}
.box img {
/*设置图片垂直居中*/
vertical-align:middle;
}
</style>
<body onload="int()">
<div class="box">
<img src="http://www.baidu.com/img/baidu_logo.gif" />
</div>
<div class="box">
<img src="http://bbs.blueidea.com/images/default/logo.gif" />
</div>
<div class="box">
<img src="http://www.baidu.com/img/baidu_logo.gif" />
</div>
<div class="box">
<img src="http://bbs.blueidea.com/images/default/logo.gif" />
</div>
<div class="box">
<img src="http://www.baidu.com/img/baidu_logo.gif" />
</div>
<div class="box">
<img src="http://bbs.blueidea.com/images/default/logo.gif" />
</div>
<div class="box">
<img src="http://www.baidu.com/img/baidu_logo.gif" />
</div>
<div class="box">
<img src="http://bbs.blueidea.com/images/default/logo.gif" />
</div>
<div class="box">
<img src="http://www.baidu.com/img/baidu_logo.gif" />
</div>
<div class="box">
<img src="http://bbs.blueidea.com/images/default/logo.gif" />
</div>
<script language="javascript">

</script>
</body>
</html>

醉梦娱乐网 · 发表于 2022-8-20 21:25:30

啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦

v3sfsi · 发表于 2023-7-14 07:43:42

看看看看看看看看看看看看看看看看看看看看看看看看看看看

64000928 · 发表于 2023-8-4 18:47:09

女生看了弄丢了卡萨诺的卡洛斯

0y3yp · 发表于 2023-9-4 13:40:11

谢谢楼主分享

白狐软件 · 发表于 2023-10-15 19:22:41

而快乐你们快乐马年快乐

黑白键 · 发表于 2023-10-19 11:23:43

非常vbcbvcvbvcb

5ble0ks · 发表于 2023-11-22 14:51:43

来看看！！！

0y3yp · 发表于 2024-3-3 01:50:54

为全额万千瓦

6q8s6p21 · 发表于 2024-3-19 13:50:43

hi哦和烦恼农家女

账号		自动登录	找回密码
密码			立即注册

[CSS] CSS设置未知大小图片在已知大小容器水平垂直居中

相关帖子