|
<< Click to Display Table of Contents >> Imagens numa grade com divs centralizadas |
  
|
|
<< Click to Display Table of Contents >> Imagens numa grade com divs centralizadas |
|
Pagina
Note que as figuras estão CENTRALIZADAS dentro da div
Fonte 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" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Centering (horizontally and vertically) an image in a box</title>
<style type="text/css">
body {
color: #000;
background-color: #fff;
font-family: Georgia, serif;
}
.wrap div {
float: left;
border: solid 1px #666;
margin: 10px 10px 0 0;
}
.wrap a {
display: table-cell;
width: 219px;
height: 219px;
text-align: center; /* qui e non su precedente, iCab3 */
vertical-align: middle;
background: #ffa url(g100c2.pl?g100c2.gif) 10px 10px;
}
.wrap img {
border: solid 1px #66f;
vertical-align: middle;
}
/*\*//*/
* html .wrap a {
display: block;
}
* html .wrap span {
display: inline-block;
vertical-align: middle;
height: 100%;
width: 1px;
}
* html .wrap a {
font-size: 1px;
}
/* non serve solito shift background-position: 11px 11px per IE/Mac, forse perche' su inline-block? */
.wrap div {
border-collapse: collapse; /* Op7 */
}
.clear {
clear: both;
margin: 0;
padding: 1em 0;
}
.wrap a:hover {
background-color: #dfd;
}
</style>
<!--[if lt IE 8]><style>
.wrap a {
display: block;
}
.wrap span {
display: inline-block;
vertical-align: middle;
height: 100%;
}
.wrap {
_height: 0;
zoom: 1;
}
</style><![endif]-->
<!--[if lt IE 5.5000]><style>
/* per clickabilita' img no dimensioni su anchor */
.wrap div {
width: 221px;
}
.wrap a {
width: auto;
height: auto;
}
.wrap span {
height: 219px;
}
</style><![endif]-->
</head>
<body>
<h1>Centering (horizontally and vertically) an image in a (fixed dimensions) box</h1>
<p>OK in IE5+/Win, IE5/Mac, Moz, Op7+, Saf</p>
<div class="wrap">
<div><a href="../miao2/miri2_m.jpg" ><span></span><img src="../thumb/tmiri2_m.jpg" alt="miao01" width="170" height="128" /></a></div>
<div><a href="../miao2/miri0_m.jpg" ><span></span><img src="../thumb/tmiri0_m.jpg" alt="miao02" width="165" height="145" /></a></div>
<div><a href="../miao/micio_mo5_m.jpg"><span></span><img src="../thumb/tmicio_mo5_m.jpg" alt="miao03" width="136" height="170" /></a></div>
<div><a href="../miao/micio_mo1_m.jpg"><span></span><img src="../thumb/tmicio_mo1_m.jpg" alt="miao04" width="160" height="162" /></a></div>
<div><a href="../miao2/miba1_m.jpg" ><span></span><img src="../thumb/tmiba1_m.jpg" alt="miao05" width="124" height="170" /></a></div>
<div><a href="../miao/micio_mo2_m.jpg"><span></span><img src="../thumb/tmicio_mo2_m.jpg" alt="miao06" width="165" height="145" /></a></div>
<div><a href="../miao2/miko0_m.jpg" ><span></span><img src="../thumb/tmiko0_m.jpg" alt="miao07" width="170" height="118" /></a></div>
<div><a href="../miao2/mimo1_m.jpg" ><span></span><img src="../thumb/tmimo1_m.jpg" alt="miao08" width="165" height="134" /></a></div>
<div><a href="../miao2/mimo2_m.jpg" ><span></span><img src="../thumb/tmimo2_m.jpg" alt="miao09" width="141" height="165" /></a></div>
<div><a href="../miao/micio_te0_m.jpg"><span></span><img src="../thumb/tmicio_te0_m.jpg" alt="miao10" width="170" height="100" /></a></div>
<div><a href="../miao/micio_te7_m.jpg"><span></span><img src="../thumb/tmicio_te7_m.jpg" alt="miao11" width="170" height="103" /></a></div>
<div><a href="../miao2/mite2_m.jpg" ><span></span><img src="../thumb/tmite2_m.jpg" alt="miao12" width="122" height="170" /></a></div>
<div><a href="../miao/micio_to4_m.jpg"><span></span><img src="../thumb/tmicio_to4_m.jpg" alt="miao13" width="170" height="128" /></a></div>
<div><a href="../miao/micio_ri0_m.jpg"><span></span><img src="../thumb/tmicio_ri0_m.jpg" alt="miao14" width="170" height="109" /></a></div>
<div><a href="../miao2/miri1_m.jpg" ><span></span><img src="../thumb/tmiri1_m.jpg" alt="miao15" width="160" height="135" /></a></div>
<div><a href="../miao2/miza1_m.jpg" ><span></span><img src="../thumb/tmiza1_m.jpg" alt="miao16" width="170" height="113" /></a></div>
</div>
<p class="clear">Other examples: <a href="img_center.html">image centering</a>, <a href="img_center1.html">centered background images</a>.</p>
<p><a href="./">CSS tests home</a></p>
</body>
</html>
Fonte
http://www.brunildo.org/test/img_center2.html