Showing posts with label div. Show all posts
Showing posts with label div. Show all posts

Wednesday, August 27, 2008

IMG is an inline element


<head>
<style type="text/css">
#div1, #div2 {
border: #333 1px solid;
background-color: #333;
height: 300px;
}
#img1 {
display: block;
}
#img2 {
vertical-align: sub; /* bottom, middle */
}
</style>
</head>
<body>
<div id="div1"><img id="img1" src="/images/puzzle1.jpg"/></div>
如果img对象不设置一下display或者vertical-align等属性,会在div底部多出一点空白,
这个就是因为img是一个inline element。
<div id="div2"><img id="img2" src="/images/puzzle2.jpg"/></div>
</body>

Wednesday, August 20, 2008

如何使div内容居中


#div1, #div2 {
display: table-cell;
*display: inline; /* hack ie */
height: 200px;
vertical-align: middle;
border: #000 1px solid;
}