2

我有一个我无法解决的问题。我正在尝试在宽度为 80% 的父 div 中自动居中多个 150x150px div（但也可能是 90% 或 100%）。我附加了一个运行良好的同位素 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

4

1 回答 1

4

替换float: left为display: inline-block

测试它：

#marque { 
position:relative;
width: 150px; 
height: 150px; 
margin:2px;
display: inline-block;
border: solid 1px #333;
text-align:center;
}
于 2013-07-23T21:29:01.647 回答