浮动图像的水平中心

Question

如何理顺不同宽度的图像。 他们都是正确的。我想让他们在下面。

为了获得最佳显示效果，示例窗口很小，因此请在计算机上以全屏模式尝试。

.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

如果您希望图像形成的文字的右边有一列，并为中心，你可以试试下面的HTML标记-up和CSS。 （1）添加包装块级元素div.table-wrap并设置display: table。

（2）设置display: table-row为子div元素。 （3）重新定位文本的顶部（标题）行，作为ul块的第一个li，并根据需要为其赋予类title和样式。定位a元素以跟随ul块。

（4）应用display: table-cell到ul和a元件，请注意a元件上使用vertical-align: top和text-align: center。

（5）调整边距和填充以在空白处获得平衡。

使用display: table的包装将允许您将图像置于CSS表格列中。如果需要，您可以将表格居中。

该布局具有相当的响应性，并使您可以使用边距和填充来控制空白区域。

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

当您使用float，浮动对象无助于父对象的高度。下一个<div>不能使用全宽，因为它不是完全低于前一个<div>的浮动图像。您需要使用clear: both;才能使其在所有浮动对象下完全启动。我已编辑您的示例代码显示此：

.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>