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>