centre horizontal des images flottantes

Question

comment puis-je redresser des images de largeur différente. Ils sont tous flottants à droite. Je veux les avoir juste dessous.

La fenêtre exemple est petit pour le meilleur affichage essayez donc en plein écran sur votre ordinateur.

.kompresor{ 
 
\t height: 150px; 
 
\t float: right; 
 
}

<div> 
 

 
<a href="../fotky/ESM250.gif" rel=lightbox[kompresor1] data-title="kompresor Gardner Denver ESM250"><img src="http://matmasar.wz.cz/fotky/ESM250.gif" title="kompresor Gardner Denver ESM250" alt="kompresor Gardner Denver ESM250" class="kompresor"></a> 
 
- \t Mazné šroubové kompresory systém zatíženo – odlehčeno, typ <b>ESM 2 -500</b> 
 
<ul> 
 
<li>Stálá rychlost motoru</li> 
 
<li>Dodávaný objem: 0,24 – 73,60 m<sup>3</sup> /min</li> 
 
<li>Výstupní tlak: 5 - 13 bar</li> 
 
<li>Výkon až 500kW</li> 
 
</ul> 
 
</div> 
 

 

 
<div> 
 
- \t Mazné šroubové kompresory s frekvenčním měničem, typ <b>VS7 – VS290</b> 
 
<a href="../fotky/GD_VS7.gif" rel=lightbox[kompresor2] data-title="kompresor Gardner Denver VS7"><img src="http://matmasar.wz.cz/fotky/GD_VS7.gif" title="kompresor Gardner Denver VS7" alt="kompresor Gardner Denver VS7" class="kompresor"></a> 
 
<ul> 
 
<li>Proměná rychlost motoru = vyšší efektivita provozu</li> 
 
<li>Dodávaný objem: 0,41 – 42,30 m<sup>3</sup> /min</li> 
 
<li>Výstupní tlak: 5 - 13 bar</li> 
 
<li>Výkon až 290kW</li> 
 
</ul> 
 
</div> 
 

 

 
<div> 
 
- \t Bezmazné šroubové kompresory řady <b>Ultima U75 – 160 PureAir</b> 
 
<a href="../fotky/Ultima U75-160_PureAir.gif" rel=lightbox[kompresor3] data-title="kompresor Gardner Denver Ultima U75-U160"><img src="http://matmasar.wz.cz/fotky/Ultima U75-160_PureAir.gif" title="kompresor Gardner Denver Ultima U75-U160" alt="kompresor Gardner Denver Ultima U75-U160" class="kompresor"></a> 
 
<ul> 
 
<li>Jedinečný design – vysoká efektivita, nízký hluk</li> 
 
<li>Proměná rychlost motoru</li> 
 
<li>100% čistý vzduch bez oleje, splňuje ISO 8573-1 Class Zero (2010)</li> 
 
<li>Výkon až 160kW</li> 
 
</ul> 
 
</div>

Answer 1

Si vous voulez que les images pour former une colonne à droite du texte et être centré, vous pouvez essayer la marque HTML suivant -up et CSS.

(1) Ajouter un élément de niveau de bloc d'enveloppe div.table-wrap et définir display: table.

(2) Définissez display: table-row pour l'élément div enfant.

(3) Repositionner la ligne de texte comme la première li du bloc ul et lui donner la classe et le style title supérieur (titre) comme vous le souhaitez. Positionnez l'élément a pour suivre le bloc ul.

(4) Appliquer display: table-cell aux éléments ul et a, noter l'utilisation vertical-align: top et text-align: center sur l'élément a.

(5) ajuster les marges et le rembourrage pour obtenir un équilibre dans les espaces blancs.

L'utilisation de l'emballage avec display: table vous permettra de centrer les images dans une colonne de table CSS. Si vous le souhaitez, vous pouvez centrer la table.

La mise en page est assez réactif et vous donne un certain contrôle sur l'espace blanc en utilisant les marges et le rembourrage.

div.table-wrap { 
 
    display: table; 
 
    width: auto; 
 
    margin: 0 auto; /* Optional: if you want to center the table/panels */ 
 
} 
 

 
div.table-wrap div { 
 
    display: table-row; 
 
} 
 

 
div.table-wrap ul { 
 
    display: table-cell; 
 
    vertical-align: top; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
div.table-wrap ul li { 
 
    margin-left: 20px; 
 
} 
 

 
div.table-wrap ul li.title { 
 
    list-style: none; 
 
    font-size: 1.00em; 
 
    margin: 0 0 10px 0; 
 
} 
 

 
div.table-wrap a { 
 
    display: table-cell; 
 
    vertical-align: top; 
 
    text-align: center; 
 
} 
 

 
div.table-wrap a img { 
 
    height: 175px; 
 
    padding-left: 20px; 
 
} 
 

 
div.table-wrap ul, div.table-wrap a { 
 
    padding-bottom: 10px; /* Controls the spacing between rows/panels */ 
 
}

<div class="table-wrap"> 
 
    <div> 
 
    <ul> 
 
     <li class="title">- Mazné šroubové kompresory systém zatíženo – odlehčeno, typ <b>ESM 2 -500</b></li> 
 
     <li>Stálá rychlost motoru</li> 
 
     <li>Dodávaný objem: 0,24 – 73,60 m<sup>3</sup> /min</li> 
 
     <li>Výstupní tlak: 5 - 13 bar</li> 
 
     <li>Výkon až 500kW</li> 
 
    </ul> 
 
    <a href="../fotky/ESM250.gif" rel=lightbox[kompresor1] data-title="kompresor Gardner Denver ESM250"><img src="http://matmasar.wz.cz/fotky/ESM250.gif" title="kompresor Gardner Denver ESM250" alt="kompresor Gardner Denver ESM250" class="kompresor"></a> 
 
    </div> 
 
    <div> 
 
    <ul> 
 
     <li class="title">- Mazné šroubové kompresory s frekvenčním měničem, typ <b>VS7 – VS290</b></li> 
 
     <li>Proměná rychlost motoru = vyšší efektivita provozu</li> 
 
     <li>Dodávaný objem: 0,41 – 42,30 m<sup>3</sup> /min</li> 
 
     <li>Výstupní tlak: 5 - 13 bar</li> 
 
     <li>Výkon až 290kW</li> 
 
    </ul> 
 
    <a href="../fotky/GD_VS7.gif" rel=lightbox[kompresor2] data-title="kompresor Gardner Denver VS7"><img src="http://matmasar.wz.cz/fotky/GD_VS7.gif" title="kompresor Gardner Denver VS7" alt="kompresor Gardner Denver VS7" class="kompresor"></a> 
 
    </div> 
 
    <div> 
 
    <ul> 
 
     <li class="title">- Bezmazné šroubové kompresory řady <b>Ultima U75 – 160 PureAir</b></b> 
 
     </li> 
 
     <li>Jedinečný design – vysoká efektivita, nízký hluk</li> 
 
     <li>Proměná rychlost motoru</li> 
 
     <li>100% čistý vzduch bez oleje, splňuje ISO 8573-1 Class Zero (2010)</li> 
 
     <li>Výkon až 160kW</li> 
 
    </ul> 
 
    <a href="../fotky/Ultima U75-160_PureAir.gif" rel=lightbox[kompresor3] data-title="kompresor Gardner Denver Ultima U75-U160"><img src="http://matmasar.wz.cz/fotky/Ultima U75-160_PureAir.gif" title="kompresor Gardner Denver Ultima U75-U160" alt="kompresor Gardner Denver Ultima U75-U160" class="kompresor"></a> 
 
    </div> 
 
</div>

Answer 2

Lorsque vous utilisez float, l'objet flottant ne contribue pas à la hauteur de l'objet parent. Le <div> suivant ne peut pas utiliser toute la largeur, car il n'est pas entièrement en dessous de l'image flottante de la précédente <div>. Vous devez utiliser clear: both; pour le démarrer complètement en dessous de tous les objets flottants. Je l'ai modifié votre code d'exemple pour montrer ceci:

.kompresor{ 
 
\t height: 150px; 
 
\t float: right; 
 
} 
 
.clear-both { 
 
    clear: both; 
 
}

<div> 
 

 
<a href="../fotky/ESM250.gif" rel=lightbox[kompresor1] data-title="kompresor Gardner Denver ESM250"><img src="http://matmasar.wz.cz/fotky/ESM250.gif" title="kompresor Gardner Denver ESM250" alt="kompresor Gardner Denver ESM250" class="kompresor"></a> 
 
- \t Mazné šroubové kompresory systém zatíženo – odlehčeno, typ <b>ESM 2 -500</b> 
 
<ul> 
 
<li>Stálá rychlost motoru</li> 
 
<li>Dodávaný objem: 0,24 – 73,60 m<sup>3</sup> /min</li> 
 
<li>Výstupní tlak: 5 - 13 bar</li> 
 
<li>Výkon až 500kW</li> 
 
</ul> 
 
</div> 
 

 

 
<div class="clear-both"> 
 
- \t Mazné šroubové kompresory s frekvenčním měničem, typ <b>VS7 – VS290</b> 
 
<a href="../fotky/GD_VS7.gif" rel=lightbox[kompresor2] data-title="kompresor Gardner Denver VS7"><img src="http://matmasar.wz.cz/fotky/GD_VS7.gif" title="kompresor Gardner Denver VS7" alt="kompresor Gardner Denver VS7" class="kompresor"></a> 
 
<ul> 
 
<li>Proměná rychlost motoru = vyšší efektivita provozu</li> 
 
<li>Dodávaný objem: 0,41 – 42,30 m<sup>3</sup> /min</li> 
 
<li>Výstupní tlak: 5 - 13 bar</li> 
 
<li>Výkon až 290kW</li> 
 
</ul> 
 
</div> 
 

 

 
<div class="clear-both"> 
 
- \t Bezmazné šroubové kompresory řady <b>Ultima U75 – 160 PureAir</b> 
 
<a href="../fotky/Ultima U75-160_PureAir.gif" rel=lightbox[kompresor3] data-title="kompresor Gardner Denver Ultima U75-U160"><img src="http://matmasar.wz.cz/fotky/Ultima U75-160_PureAir.gif" title="kompresor Gardner Denver Ultima U75-U160" alt="kompresor Gardner Denver Ultima U75-U160" class="kompresor"></a> 
 
<ul> 
 
<li>Jedinečný design – vysoká efektivita, nízký hluk</li> 
 
<li>Proměná rychlost motoru</li> 
 
<li>100% čistý vzduch bez oleje, splňuje ISO 8573-1 Class Zero (2010)</li> 
 
<li>Výkon až 160kW</li> 
 
</ul> 
 
</div>