My images on my page won’t center themselves and be in a row at the same time.

When I try to change the CSS float from ‘left’ to ‘center’, it centers the images, but puts them underneath each other.

Is there a way to fix this?

.column {
float: center;
width: 20%;
padding: 5px;
}

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

<div class="row">
   <div class="column">
     <div id="images">
       <a href="https://galostick.neocities.org/crafts" target="_blank">
         <img style="border: 5px solid #FFFFFF" src="https://galostick.neocities.org/images/kitty_yarn_md_clr.gif"
         alt="cat on yarn gif"
         height="150" width="150">
         <div class="caption">
         <span style="color: #FFFFFF">
           <span style="border: 5px solid #FFFFFF">
             crafting!
           </span>
         </span>
         </div>
       </a>
    </div>
   </div>

   <div class="column">
     <div id="images">
       <a href="https://galostick.neocities.org/movies" target="_blank">
         <img style="border: 5px solid #FFFFFF" src="https://galostick.neocities.org/gifs/video_camera_turn_md_clr.gif"
         alt="cat on yarn gif"
         height="150" width="150">
         <div class="caption">
         <span style="color: #FFFFFF">
           <span style="border: 5px solid #FFFFFF">
             videos!
           </span>
       </span>
       </div>
       </a>
     </div>
   </div>