Horizontally align an image with the middle image of three colum table in html

Question

what I am struggling with can be seen below:

I have an reference image at the top that is slightly offset in relation to the middle image of a three column table (see blue markings). Is there a way to completely align the two images?

This is the code that produces the image below:

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

Corresponding CSS:

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

Have you considered using `display: table;`, as shown in [How (and why) to use display: table-cell (CSS)](https://stackoverflow.com/questions/29229523/how-and-why-to-use-display-table-cell-css)? (With empty cells for the first and last columns of the first row.) — Andrew Morton, May 11 '20 at 14:18
unable to reproduce the issue with your code above. it looks different from the picture you posted. — yinsweet, May 11 '20 at 14:23
That's odd because I used inspect, let me quickly see why there is a discrepancy. — JAQuent, May 11 '20 at 14:25

score 2 · Accepted Answer · answered May 11 '20 at 14:26

I took the liberty of altering your HTML a little. Basically, you want CSS Grid for this project. Make a 3x2 grid, then make the top row span three columns.

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  text-align: center;
  grid-gap: 0 10px;
}

.top {
  grid-column: 1/4;
  justify-self: center;
}

.num {
  font-size: 20px;
  text-align: center;
}

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

<div class="grid">

  <img class="top" src="https://www.placecage.com/201/100">

  <div class="threeColumn">
    <img src="https://www.placecage.com/200/100">
    <div class="num">1</div>
  </div>
  <div class="threeColumn">
    <img src="https://www.placecage.com/201/100">
    <div class="num">2</div>
  </div>
  <div class="threeColumn">
    <img src="https://www.placecage.com/204/100">
    <div class="num">3</div>
  </div>
</div>

Horizontally align an image with the middle image of three colum table in html

1 Answers1