Centre V & H img et texte sur la même ligne dans le tableau à 3 colonnes

Question

J'ai des problèmes pour centrer img et le texte sur la même ligne dans un tableau à 3 colonnes (plus tard, il y aura plus de lignes que 1). . J'ai un code, mais l'image et le texte ne sont pas sur la même ligne .. S'il vous plaît aider

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

Pour une meilleure imagination, je fait un peu aperçu comment il devrait ressembler à: enter image description here

Answer 1

Vous devrait utiliser flexbox pour obtenir ce que vous voulez. Voici une bonne intro: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Si vous voulez le rendre complètement dynamique, ça va devenir plus compliqué. Si vous savez combien d'articles vous et à quelle fréquence ils vont envelopper, vous pouvez définir une largeur statique pour le 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>