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>