變量父div中的中心固定寬度div div

Question

我有一個問題，我無法解決。 我想在父寬度爲80％（但也可能是90％或100％）的父div中自動居中多個150x150px的div。 我有一個同位素JQuery附加，工作正常，但當我放大我的導航窗口時，子div不會移動，此外，他們不居中居住「（上面的菜​​單工作正常）。

下面是HTML代碼：

<div class="portfolioContainer"> 
    <div id="marque" class="interieur"> 
    <p class="categorie"><a href="http://www.arper.it" target="_blank"> 
    <img src="images/logo_arper_140_Noir.jpg" width="100" height="33"></a><br> 
    <span class="txt">ARPER</span><br> 
    MOBILIER</p> 
    </div> 
    <div id="marque" class="interieur exterieur"> 
    <p class="categorie"><a href="http://www.b-line.it" target="_blank"> 
    <img src="images/logo_bline_140_Noir.jpg" width="140"></a><br> 
    <span class="txt">B-LINE</span><br> 
    MOBILIER</p> 
    </div> 
    <div id="marque" class="audio ipod"> 
    <p class="categorie"><a href="http://www.bowers-wilkins.fr" target="_blank"> 
    <img src="images/logo_BW_140_Noir.jpg" width="80" height="33"></a><br> 
    <span class="txt">BOWERS &amp; WILKINS</span><br> 
    AUDIO</p> 
    </div> 
    <div id="marque" class="audio"> 
    <p class="categorie"><a href="http://www.clearaudio.de" target="_blank"> 
    <img src="images/logo_clearaudio_140_Noir.jpg" width="80" height="74"></a><br> 
    <span class="txt">CLEARAUDIO</span><br> 
    PLATINES VINYLE</p> 
    </div> 
</div> 

和CSS：

#container { 
width:80%; 
padding-top:50px; 
position:relative; 
margin: auto; 
text-align:center; 
} 

p { 
width:150px; 
margin:0; 
padding:0; 
position:absolute; 
bottom:20px; 
text-align:center; /* centrage horizontal */ 
} 

img { 
padding-top:5px; 
padding-bottom:10px; 
} 

#marque { 
position:relative; 
width: 150px; 
height: 150px; 
margin:2px; 
float:left; 
border: solid 1px #333; 
text-align:center; 
} 

頁可以在這個地址找到看到整個HTML/CSS代碼： www.pixsix.fr/marques.html

Answer 1

取代float: left至display: inline-block

測試：

#marque { 
position:relative; 
width: 150px; 
height: 150px; 
margin:2px; 
display: inline-block; 
border: solid 1px #333; 
text-align:center; 
}