CODEWITHSUNDEEP
csshtmlcenter
Gildas Bizeul
Gildas Bizeul

Reputation: 21

center fixed width divs in a variable parent div

I have a problem I can't solve. i'm trying to auto center multiple 150x150px divs in a parent div that is 80% width (but it could also be 90% or 100%). I have an isotope JQuery attached that works fine but when I enlarge my navigator window, the child divs do not move and furthermore, they do not center "live" (the menu above works fine).

Here is the 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 &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>

and the 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 be found at this address to see the whole html/CSS code: www.pixsix.fr/marques.html

Upvotes: 2

Views: 2016

Answers (1)

DJafari
DJafari

Reputation: 13535

replace float: left to display: inline-block

test it :

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

Upvotes: 4

Related Questions