将居中图像保留在非居中的父元素之外

Question

我在stackoverflow上得到了一个帮助，但当我在我的代码上应用它时，它没有按预期工作。

我尝试了很多东西，但是我没有找到如何将图像保持在“列”中（就像它们现在一样）但文本对齐到左边。

我该怎么办？ 如果我从margin: 0 auto文本中删除div.table-wrap从左到右（就像它应该），但它随图像一起移动..我想将图像固定在右侧并以“图像列为中心” “

div.table-wrap {
  display: table;
 width: auto;
 margin: 0 auto;
}

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.titulek {
  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: 150px;
  padding-left: 20px;
}

<div class="table-wrap">
<div>
<ul>
<li class="titulek">-	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>

<div class="table-wrap">
<div>
<ul>
<li class="titulek">-	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>


<div class="table-wrap">
<div>
<ul>
<li class="titulek">-	Bezmazné šroubové kompresory řady <b>Ultima U75 – 160 PureAir</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>

<div class="table-wrap">
<div>
<ul>
<li class="titulek">-	Bezmazné šroubové kompresory řady <b>EnviroAire S PureAir</b></li>
<li>Stálá rychlost motoru</li>
<li>Splňuje ISO 8573-1 CLASS O</li>
<li>Dodávaný objem: 0,39 – 1,76 m<sup>3</sup> /min</li>
<li>Výstupní tlak: 8 / 10 bar</li>
<li>Výkon až 15kW</li>
</ul>
<a href="../fotky/GD_EnviroAire_S_PureAir.gif" rel=lightbox[kompresor4] data-title="kompresor Gardner Denver EnviroAire S PureAir.jpg"><img src="http://matmasar.wz.cz/fotky/GD_EnviroAire_S_PureAir.gif" title="kompresor Gardner Denver EnviroAire S PureAir" alt="kompresor Gardner Denver EnviroAire S PureAir" class="kompresor"></a>
</div>
</div>

Answer 1

为什么不使用表格布局？

我想出了类似的东西：

.table-box {
    width: 80%;
    margin: 0 auto;
    border: 1px dashed #000;
}

.table-box tr td:nth-of-type(2) {
    text-align: center;
}

.table-box img {
    height: 150px;
}

修改后的html：

<table class="table-box">

    <tr>
        <td>
            <ul>
                <li class="titulek">-   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>
        </td>
        <td>
            <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>
        </td>
    </tr>

    <tr>
        <td>
            <ul>
                <li class="titulek">-   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>
        </td>
        <td>
            <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>
        </td>
    </tr>

    <tr>
        <td>
            <ul>
                <li class="titulek">-   Bezmazné šroubové kompresory řady <b>Ultima U75 – 160 PureAir</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>
        </td>
        <td>
            <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>
        </td>
    </tr>

    <tr>
        <td>
            <ul>
                <li class="titulek">-   Bezmazné šroubové kompresory řady <b>EnviroAire S PureAir</b></li>
                <li>Stálá rychlost motoru</li>
                <li>Splňuje ISO 8573-1 CLASS O</li>
                <li>Dodávaný objem: 0,39 – 1,76 m<sup>3</sup> /min</li>
                <li>Výstupní tlak: 8 / 10 bar</li>
                <li>Výkon až 15kW</li>
            </ul>
        </td>
        <td>
            <a href="../fotky/GD_EnviroAire_S_PureAir.gif" rel=lightbox[kompresor4] data-title="kompresor Gardner Denver EnviroAire S PureAir.jpg"><img src="http://matmasar.wz.cz/fotky/GD_EnviroAire_S_PureAir.gif" title="kompresor Gardner Denver EnviroAire S PureAir" alt="kompresor Gardner Denver EnviroAire S PureAir" class="kompresor"></a>
        </td>
    </tr>

</table>

Answer 2

每个margin:0 auto的{​​{1}}不同。这与您的width结合使左对齐显示在不同的区域。  在div.table-wrap上设置width:100%会使所有文本都与左侧对齐，图片位于右侧。我将其设置为div.table-wrap { display: table; width: 100%; margin: 0 auto; } 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.titulek { 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: 150px; padding-left: 20px; }，它与您想要的结果相匹配。

<div class="table-wrap">
<div>
<ul>
<li class="titulek">-	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>

<div class="table-wrap">
<div>
<ul>
<li class="titulek">-	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>


<div class="table-wrap">
<div>
<ul>
<li class="titulek">-	Bezmazné šroubové kompresory řady <b>Ultima U75 – 160 PureAir</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>

<div class="table-wrap">
<div>
<ul>
<li class="titulek">-	Bezmazné šroubové kompresory řady <b>EnviroAire S PureAir</b></li>
<li>Stálá rychlost motoru</li>
<li>Splňuje ISO 8573-1 CLASS O</li>
<li>Dodávaný objem: 0,39 – 1,76 m<sup>3</sup> /min</li>
<li>Výstupní tlak: 8 / 10 bar</li>
<li>Výkon až 15kW</li>
</ul>
<a href="../fotky/GD_EnviroAire_S_PureAir.gif" rel=lightbox[kompresor4] data-title="kompresor Gardner Denver EnviroAire S PureAir.jpg"><img src="http://matmasar.wz.cz/fotky/GD_EnviroAire_S_PureAir.gif" title="kompresor Gardner Denver EnviroAire S PureAir" alt="kompresor Gardner Denver EnviroAire S PureAir" class="kompresor"></a>
</div>
</div>

DisplayMemberPath

Answer 3

老实说，我会切换到使用表格。使您的图像更容易放置，您需要更少的CSS。像这样：https://plnkr.co/edit/xnNk1AXJp8uSG8BfvFCj?p=preview

请参阅我的代码：

<table>
  <tr class="table-wrap">
    <td>
<ul>
<li class="titulek">-   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>
</td>
<td class="img-td">
<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>
</td>
</tr>

<tr class="table-wrap">
   <td>
<ul>
<li class="titulek">-   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>
</td>
<td class="img-td">
<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>
</td>
</tr>

<tr class="table-wrap">
   <td>
<ul>
<li class="titulek">-   Bezmazné šroubové kompresory řady <b>Ultima U75 – 160 PureAir</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>
</td>
<td class="img-td">
<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>
</td>
</tr>

<tr class="table-wrap">
   <td>
<ul>
<li class="titulek">-   Bezmazné šroubové kompresory řady <b>EnviroAire S PureAir</b></li>
<li>Stálá rychlost motoru</li>
<li>Splňuje ISO 8573-1 CLASS O</li>
<li>Dodávaný objem: 0,39 – 1,76 m<sup>3</sup> /min</li>
<li>Výstupní tlak: 8 / 10 bar</li>
<li>Výkon až 15kW</li>
</ul>
</td>
<td class="img-td">
<a href="../fotky/GD_EnviroAire_S_PureAir.gif" rel=lightbox[kompresor4] data-title="kompresor Gardner Denver EnviroAire S PureAir.jpg"><img src="http://matmasar.wz.cz/fotky/GD_EnviroAire_S_PureAir.gif" title="kompresor Gardner Denver EnviroAire S PureAir" alt="kompresor Gardner Denver EnviroAire S PureAir" class="kompresor"></a>
</td>
</tr>
</table>

.table-wrap {
 width: auto;
}

td.img-td {
  text-align: center;
}

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

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

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

.table-wrap a img {
  height: 150px;
  padding-left: 20px;
  text-align: center;
}

Answer 4

你可以通过overflow: hidden;对应该动态调整大小的内容做一些聪明的事情！

您可以在下面的示例中看到图像具有固定宽度，并且向右浮动，而文本内容未浮动，但具有overflow: hidden;，这使其响应并包裹为容器调整大小。

如果我可以提供帮助，我更喜​​欢不使用表格来表示半表格内容。您在示例中描述的模式看起来很常见，通常称为媒体对象。有一篇很好的帖子可以更多地讨论它，在这里：Media Object Write-Up

它基本上只是一个网页设计模式，一面有图像，另一面有某种文字/按钮/任何内容。

.columns {
  width: 100%;
  margin-bottom: 20px;
}

/* a clearfix, since I used floats */
.columns:after {
  content: '';
  display: table;
  clear: both;
}

.columns__column {
  padding: 10px;
}

.columns__column--left {
  overflow: hidden;
}

.columns__column--right {
  width: 210px;
  float: right;
  text-align: center;
}



/* just some generic stuff */
p {margin: 0;}
img {display: inline-block; max-width: 100%;}

<div class="columns">
  <div class="columns__column  columns__column--right">
    <img src="http://placekitten.com.s3.amazonaws.com/homepage-samples/408/287.jpg" alt="kitten">
  </div>
  
  <div class="columns__column  columns__column--left">
    <p>Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
  </div>
</div>

<div class="columns">
  <div class="columns__column  columns__column--right">
    <img src="http://placekitten.com.s3.amazonaws.com/homepage-samples/96/140.jpg" alt="kitten2">
  </div>
  
  <div class="columns__column  columns__column--left">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  </div>
</div>

<div class="columns">
  <div class="columns__column  columns__column--right">
    <img src="http://placekitten.com.s3.amazonaws.com/homepage-samples/200/140.jpg" alt="kitten2">
  </div>
  
  <div class="columns__column  columns__column--left">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequa.</p>
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </ul>
  </div>
</div>