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

what I am struggling with can be seen below: enter image description here

我在顶部有一个参考图像,该参考图像相对于三列表的中间图像略有偏移(请参阅蓝色标记)。有没有办法完全对齐两个图像?

这是产生以下图像的代码:

<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>

对应的CSS:

.threeColumn {
  float: left;
  width: 33%;
}
评论