css - center fixed width divs in a variable parent div -
i have problem can't solve. i'm trying auto center multiple 150x150px divs in parent div 80% width (but 90% or 100%). have isotope jquery attached works fine when enlarge navigator window, child divs not move , furthermore, not center "live" (the menu above works fine).
here html code :
<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 & 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> and 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; } the page can found @ address see whole html/css code: www.pixsix.fr/marques.html
replace float: left display: inline-block
test :
#marque { position:relative; width: 150px; height: 150px; margin:2px; display: inline-block; border: solid 1px #333; text-align:center; }
Comments
Post a Comment