jQuery si rivela molto utile anche per mantenere la nostra marcatura snella e priva di elementi aggiuntivi. La centratura degli elementi all'interno di un contenitore è un tipico esempio di questa caratteristica di jQuery. Vediamo un esempio pratico.
Abbiamo la seguente struttura:
<div id="wrapper">
<div class="box">Test box</div>
<div class="box">Test box</div>
<div class="box">Test box</div>
</div>
Vogliamo trasformarla nella seguente struttura per mantenere i tre box centrati:
<div class="outerwrapper">
<div id="wrapper" class="innerwrapper">
<div class="box">Test box</div>
<div class="box">Test box</div>
<div class="box">Test box</div>
</div>
</div>
Gli stili CSS sono i seguenti:
.box {
width: 100px;
height: 100px;
background: yellow;
border: 1px solid orange;
line-height: 100px;
text-align: center;
float: left;
margin-right: 5px;
}
.innerwrapper {
width: 322px;
overflow: hidden;
margin: 0 auto;
padding: 0;
}
.outerwrapper {
width: 600px;
margin: 2em auto;
padding: 2em 0;
border: 2px solid green;
overflow: hidden;
}
.normargin {
margin-right: 0 !important;
}
Nota
Sarebbe possibile usare la dichiarazione display: inline-block sui tre box e text-align: center sul loro contenitore per avere lo stesso effetto con i CSS. Tuttavia, inline-block non è supportato da IE7 e inferiori.
Il codice jQuery è molto semplice:
$(function() {
$('div.box:last', '#wrapper').addClass('nomargin');
var outerWrapper = $('<div class="outerwrapper"></div>');
$('#wrapper').wrap(outerWrapper).addClass('innerwrapper');
});
Potete visionare l'esempio finale in questa pagina.