3列表格中同一行的V＆H中心img和文本

Posted 2023-03-05

【中文标题】3列表格中同一行的V＆H中心img和文本

【英文标题】：V & H center img and text on the same line in 3 column table

【发布时间】：2018-04-01 08:20:02

【问题描述】：

我在将 img 和 text 在 3 列表中的同一行上居中时遇到了问题（以后它的行数会多于 1 行）.. 我有一些代码，但图像和文本不在同一个行..请帮忙

<table style="border: 0px; width: auto; margin: 0 auto;">
<tbody>
<tr>
	<td style="width: 33%" align="center" valign="middle">
		<p>
			<img   border="0" style="padding-right:8px;background-color:#fff" src="http://www.luxera-lighting.com/_images/_ikony/35.jpg"  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   border="0" style="padding-right:8px;background-color:#fff" src="http://www.luxera-lighting.com/_images/_ikony/36.jpg"  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   border="0" style="padding-right:8px;background-color:#fff" src="http://www.luxera-lighting.com/_images/_ikony/39.jpg"  title="Určené pre montáž na strop">
			<h4>Určené pre montáž na strop</h4>
		</p>
	</td>
</tr>
</tbody>
</table>

为了更好的想象，我做了一些预览，它应该是什么样子： enter image description here

【参考方案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"  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"  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"  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"  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"  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"  title="Minimálna vzdialenosť od osvetlovaného objektu 0,5m">
<text>Minimálna vzdialenosť od osvetlovaného objektu 0,5m</text>
  </div>
</div>

【讨论】：

先生。 Rafael，我想做这样的事情：[link]i.stack.imgur.com/iJIu7.png可能是我写的不好，对不起