V＆H中心img和文本在3列表中的同一行上

Question

我在将3列表中的同一行上的img和文本置于中心位置时遇到了麻烦（之后它将具有比1更多的行）。我有一些代码，但图片和文字不在同一行。请帮

<table style="border: 0px; width: auto; margin: 0 auto;"> 
 
<tbody> 
 
<tr> 
 
\t <td style="width: 33%" align="center" valign="middle"> 
 
\t \t <p> 
 
\t \t \t <img width="50" height="50" border="0" style="padding-right:8px;background-color:#fff" src="http://www.luxera-lighting.com/_images/_ikony/35.jpg" alt="Minimálna vzdialenosť od osvetlovaného objektu 0,5m" title="Minimálna vzdialenosť od osvetlovaného objektu 0,5m"> 
 
\t \t \t <h4>Minimálna vzdialenosť od osvetlovaného objektu 0,5m</h4> 
 
\t \t </p> 
 
\t </td> 
 
\t 
 
\t <td style="width: 33%" align="center" valign="middle"> 
 
\t \t <p> 
 
\t \t \t <img width="50" height="50" border="0" style="padding-right:8px;background-color:#fff" src="http://www.luxera-lighting.com/_images/_ikony/36.jpg" alt="IP 20 - Stupeň IP ochrany svietidiel " title="IP 20 - Stupeň IP ochrany svietidiel "> 
 
\t \t \t <h4>IP 20 - Stupeň IP ochrany svietidiel</h4> 
 
\t \t </p> 
 
\t </td> 
 
\t 
 
\t <td style="width: 33%" align="center" valign="middle"> 
 
\t \t <p> 
 
\t \t \t <img width="50" height="50" border="0" style="padding-right:8px;background-color:#fff" src="http://www.luxera-lighting.com/_images/_ikony/39.jpg" alt="Určené pre montáž na strop" title="Určené pre montáž na strop"> 
 
\t \t \t <h4>Určené pre montáž na strop</h4> 
 
\t \t </p> 
 
\t </td> 
 
</tr> 
 
</tbody> 
 
</table>

为了更好地想象我做了一些预览应该如何看起来像： enter image description here

Answer 1

你应该使用flexbox来获得你想要的。这是一个很好的介绍：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

如果你想使它完全动态，它会变得更加复杂。如果你知道你有多少条目以及它们将如何经常换，你可以设置一个静态宽度div.imageAndText

<style> 
 
    .all { 
 
display: flex; 
 
flex-wrap: wrap; 
 
align-content: space-around; 
 
    } 
 
    .imageAndText { 
 
display:flex; 
 
flex-grow: 1; 
 
flex-basis: 0; 
 
flex-direction: row; 
 
justify-content: left; 
 
align-items: center; 
 
margin: 5px; 
 
    } 
 
    .imageAndText img { 
 
min-width: 50px; 
 
min-height: 50px; 
 
padding-right: 8px; 
 
    } 
 
.imageAndText text { 
 
    height: 50px; 
 
    white-space: pre-wrap; 
 
    display: flex; 
 
    align-items: center; 
 
    width: 200px; 
 
} 
 
</style> 
 
<div class="all"> 
 
    <div class="imageAndText"> 
 
<img src="http://www.luxera-lighting.com/_images/_ikony/35.jpg" alt="Minimálna vzdialenosť od osvetlovaného objektu 0,5m" title="Minimálna vzdialenosť od osvetlovaného objektu 0,5m"> 
 
<text>Minimálna vzdialenosť od osvetlovaného objektu 0,5m</text> 
 
    </div> 
 
    <div class="imageAndText"> 
 
<img src="http://www.luxera-lighting.com/_images/_ikony/36.jpg" alt="IP 20 - Stupeň IP ochrany svietidiel " title="IP 20 - Stupeň IP ochrany svietidiel "> 
 
<text>IP 20 - Stupeň IP ochrany svietidiel</text> 
 
    </div> 
 
    <div class="imageAndText"> 
 
<img src="http://www.luxera-lighting.com/_images/_ikony/39.jpg" alt="Určené pre montáž na strop" title="Určené pre montáž na strop"> 
 
<text>Určené pre montáž na strop</text> 
 
    </div> 
 
    <div class="imageAndText"> 
 
<img src="http://www.luxera-lighting.com/_images/_ikony/39.jpg" alt="Určené pre montáž na strop" title="Určené pre montáž na strop"> 
 
<text>Určené pre montáž na strop</text> 
 
    </div> 
 
    <div class="imageAndText"> 
 
<img src="http://www.luxera-lighting.com/_images/_ikony/36.jpg" alt="IP 20 - Stupeň IP ochrany svietidiel " title="IP 20 - Stupeň IP ochrany svietidiel "> 
 
<text>IP 20 - Stupeň IP ochrany svietidiel</text> 
 
    </div> 
 
    <div class="imageAndText"> 
 
<img src="http://www.luxera-lighting.com/_images/_ikony/35.jpg" alt="Minimálna vzdialenosť od osvetlovaného objektu 0,5m" title="Minimálna vzdialenosť od osvetlovaného objektu 0,5m"> 
 
<text>Minimálna vzdialenosť od osvetlovaného objektu 0,5m</text> 
 
    </div> 
 
</div>