浮动图像的水平中心

时间：2017-09-23 20:37:22

标签： html css css-float

如何理顺不同宽度的图像。 它们都是浮动的。我想把它们放在下面。

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

.kompresor{
	height: 150px;
	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>
-	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>
-	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>
-	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>

2 个答案:

答案 0 :(得分：2)

使用float时，浮动对象不会影响父对象的高度。下一个<div>无法使用全宽，因为它不完全低于之前<div>的浮动图像。您需要使用clear: both;使其在所有浮动对象下完全启动。我编辑了您的示例代码以显示：

＆＃13;
＆＃13; 
.kompresor{
	height: 150px;
	float: right;
}
.clear-both {
  clear: both;
}
＆＃13; 
<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>
-	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">
-	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">
-	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>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

如果您希望图像在文本右侧形成一列并居中，您可以尝试以下HTML标记和CSS。

（1）添加包装块级元素div.table-wrap并设置display: table。

（2）为子display: table-row元素设置div。

（3）将文本的顶部（标题）行重新定位为li块的第一个ul，并根据需要为其提供类title和样式。定位a元素以跟随ul块。

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

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

相关问题
最新问题