浮动图像的水平中心

Question

如何将不同宽度的图片拉直。他们都是浮动的。我想把它们放在下面。

示例 window 较小，为了获得最佳显示效果，请在您的计算机上全屏尝试。

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

Answer 1

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

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

Answer 2

如果你想让图片在文字的右侧形成一列并且居中，你可以试试下面的HTML mark-up和CSS.

(1) 添加一个包装块级元素 div.table-wrap 并设置 display: table.

(2) 为 child div 个元素设置 display: table-row。

(3) Re-position 文本的顶部（标题）行作为 ul 块的第一个 li 并给它 class title 和所需的样式。将 a 元素放置在 ul 块之后。

(4) 将display: table-cell应用于ul和a元素，注意在a上使用vertical-align: top和text-align: center元素.

(5) 调整边距和填充以获得白色的平衡space。

将包装器与 display: table 一起使用将使您能够将图像居中放置在 CSS-table 列中。如果需要，您可以将 table.

居中

布局响应合理，让您可以使用边距和填充对白色 space 进行一些控制。

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>

浮动图像的水平中心

horizontal center of floated images

html

css

css-float