是否将display: flex和flex-direction: column设置为col类？

.col {
  display: flex;
  flex-direction: column;
}

它帮我把它们排列起来。

<div style="
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: auto;
    gap: 8em;
    padding: 4em 0;    //Move this style to some class
">
 <div class="col">
    <img class="img_tools" src="IMG/screen.jpg" alt="">
    <button id="btn">Screen Recorder</button>
 </div>
    <div class="col">
    <img class="img_tools" src="IMG/mic.jpg" alt="">
    <button id="btn">Audio Recorder</button>
  </div>
  <div class="col">
     <img class="img_tools" src="IMG/video.jpg" alt="">
     <button id="btn">Camera Recorder</button>
  </div>
</div>

.col类的样式：

.col {
    display: flex;
    flex-direction: column;
}

将这个属性添加到col类中，所有div都将居中并相等

float: left;
    padding: 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

如果你减小屏幕的宽度，你会注意到中间的项目会对齐，当屏幕超过一定宽度时，它们会失去对齐。目前，这是由于当父组件超过一定宽度时，中间列能够水平对齐项目。
因为你似乎希望父组件，三个项目后面的红色条只达到一定的宽度，一个非常简单的解决办法是添加一个最大宽度为1100px的红色条，如下所示（目前该组件的最大宽度只是稍微高一点）：

element.style {
    max-width: 1100px;
}

还可以通过将.col的css更改为以下内容来对齐项目：

.col {
    float: left;
    width: 33%;
    padding: 10px;
    display: flex;
    flex-direction: column;
}

选择最适合您的：）