Question

我在将3位列中的img和文本居中放在同一行上时遇到了麻烦（后来它会有比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/

如果你想让它完全动态，它会变得更复杂。如果你知道你有多少项以及它们包装的频率，你可以为document.getElementById('canvas').style.height = finalSize

设置一个静态宽度

div.imageAndText

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

1 个答案: