Imagens numa grade com divs centralizadas

<< Click to Display Table of Contents >>

Navigation:  Html >

Imagens numa grade com divs centralizadas

Previous pageReturn to chapter overviewNext page

Pagina

 

Note que as figuras estão CENTRALIZADAS dentro da div

 

html_css_centralizar

 

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