将图像与html中三列表格的中间图像水平对齐

下面是我正在努力解决的问题：

我在顶部有一个参考图像，它相对于一个三列表格的中间图像稍微偏移（参见蓝色标记）。有没有办法完全对齐这两个图像

这是生成下图的代码：

<p>In the video you just watched, which one of the three objects at the bottom of the screen appeared immediately before this object?</p>
<p><img src="images/stimuli/35.png" style="width:23.099999999999998%; height:23.099999999999998%"></p>
<div class="row"><div class="threeColumn">
<p style="float: center; font-size: 20pt; text-align: center;">
    <img src="images/stimuli/58.png" style="width:70%; height:70%">
        <br>1</p></div><div class="threeColumn">
<p style="float: center; font-size: 20pt; text-align: center;">
    <img src="images/stimuli/4.png" style="width:70%; height:70%">
        <br>2</p></div><div class="threeColumn">
<p style="float: center; font-size: 20pt; text-align: center;">
    <img src="images/stimuli/15.png" style="width:70%; height:70%">
        <br>3</p>
</div>
</div>
</div>
</div>
</div>

---

我冒昧地稍微修改了一下你的HTML。基本上，这个项目需要CSS网格。制作一个3x2网格，然后使顶行跨越三列

.grid{
显示：网格；
网格模板柱：1fr 1fr 1fr；
网格模板行：1fr 1fr；
文本对齐：居中；
栅极间隙：0 10px；
}
.顶{
网格柱：1/4；
自我辩护：中心；
}
纳姆先生{
字体大小：20px；
文本对齐：居中；
}

在您刚才观看的视频中，屏幕底部的三个对象中，哪一个出现在该对象之前

1.
2.
3.

您是否考虑过使用

显示：表格，如中所示？（第一行的第一列和最后一列的单元格为空。）无法使用上面的代码重现此问题。它看起来和你贴的图片不一样。这很奇怪，因为我使用了inspect，让我快速看看为什么会有差异。没关系。现在你有了你的解决方案。
.threeColumn {
  float: left;
  width: 33%;
}