嵌入式的学习

最新推荐文章于 2024-09-14 22:08:32 发布

liulx

最新推荐文章于 2024-09-14 22:08:32 发布

阅读量383

点赞数

文章标签：嵌入式 xhtml class div 数据库 table

　　最近，对于如何让未知尺寸大小的图片在容器中垂直居中这个问题，大家表现出关注度非常高。

　　首先，我们不要去追究是否有这样做的必要，因为有的时候图片是从数据库读取的，可能大小不一，这时候为了不让图片大小不一而破坏了页面的美观性，其实就有必要这么做了。

　　总的来说，会有几种方案可以用来做这件事。这里，我只写一种个人认为较为简单和易于理解的方法。

　　［预览地址：暂未上传］

CSS部分：

.outer {
border:1px solid #f00;
display:table;
width:300px;
height:300px;
text-align:center;
float:left;
margin-right:20px;
#position:relative;
}
.mid {
display:table-cell;
vertical-align:middle;
#position:absolute;
#top:50%;
}
.mid img {
#position:relative;
#top:-50%;
#left:-50%;
vertical-align:middle;
}

XHTML部分：

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta http-equiv="Content-Language" content="gb2312" />
<title>test</title>
<meta name="Author" content="Doyoe(飘零雾雨), edzmaster@gmail.com" />
</head>
<body>
<h1>Vertical Centering in CSS</h1>
<div class="outer">
<div class="mid"><img src="1.gif" alt="test1" title="test1" /></div>
</div>
<div class="outer">
<div class="mid"><img src="2.gif" alt="test2" title="test2" /></div>
</div>
</body>
</html>