html - 奇怪的网格 CSS

Question

我正在尝试制作带有标题的图像网格。我正在使用简单的 CSS 来创建网格。

CSS:

.float{float:left;padding:20;}
.float img{ width:80px; height:100px; padding:0;}
.float p {text-align:center; margin-top:0;width:100px;}

然后使用相同的格式打印出几个 div:

<div class="float">
<img src="noimage.jpeg"></img>
<p>Movie Title</p>
</div>

问题是标题(在这种情况下是电影标题)总是很长，有时跨越多行，我得到一个看起来像这样的网格:

我可以更改 CSS 中的某些内容以使图像保持一致吗？

Answer 1

提及text-align:center; height:180px; 在 .float 类中

.float{float:left;padding:20; text-align:center; height:180px;}

我认为这会解决您的问题。