V & H 居中 img 和 text 在 3 列的同一行 table

Question

我在将 img 和文本居中放置在 3 列的同一行上时遇到了问题 table（稍后它的行数将多于 1）..我有一些代码，但图像和文本不在同一条线上.. 请帮助

<table style="border: 0px; width: auto; margin: 0 auto;">
<tbody>
<tr>
 <td style="width: 33%" align="center" valign="middle">
  <p>
   <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">
   <h4>Minimálna vzdialenosť od osvetlovaného objektu 0,5m</h4>
  </p>
 </td>
 
 <td style="width: 33%" align="center" valign="middle">
  <p>
   <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 ">
   <h4>IP 20 - Stupeň IP ochrany svietidiel</h4>
  </p>
 </td>
 
 <td style="width: 33%" align="center" valign="middle">
  <p>
   <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">
   <h4>Určené pre montáž na strop</h4>
  </p>
 </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>

V & H 居中 img 和 text 在 3 列的同一行 table

V & H center img and text on the same line in 3 column table

text

image

centering