Html – How do I move these arrows down to be centered in the column?

I’m trying to change the size and move the up and down arrows to be centered in its respected column.
Here is a screenshot fo the problem.
Screenshot of website

Here’s the HTML code of one of the table columns(All 5 columns have essentially the same code):

`<td>
  <div class = "row">
    <div class = "column1">
         <img id="slideShirt" class = "IMGsize" src="https://..." alt="Hawaiian Shirt 1">
            <h3 class = "shirt" id ="shirtName">
               <center>Shirt 1</center> 
            </h3> 
     </div>

     <div class = "column2">
        <img onclick="nextShirt()" class = "arrow" src="https://..." alt="Up arrow">
        <br>
        <img onclick="previousShirt()" class = "arrow" src="https://..." alt="down arrow">
     </div>  
  </div> 
</td>`

The image of the shirt is in "column 1" and the up and down arrows are in "column 2"

Here is the css code that goes with the columns and images of the arrows:

.column1 {
    
    float: left;
    width: 60%;
    height:85%;
}

.column2 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: auto;
    height: 100%;  
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

img.arrow {
  height: 115%;
  width: 30%;
}

For some reason I can’t change the size or postion of the arrows using the "arrow" class. The arrows are in column2 but everything in the column 2 looks like it would make the image centered but it’s not.
Any and all helps/ideas are welcomed. Please and thank you.