3列テーブルの同じ行にあるV＆Hセンターimgとテキスト

Question

3列テーブルの同じ行にimgとテキストのセンタリングについて問題があります（後で1より多くの行があります）。 。 enter image description here

：私はそれがどのように見えるべきか、いくつかのプレビューをした優れた想像力のために

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

を助けてください..私はいくつかのコードを持っていますが、画像とテキストが同じ行にありません

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>