前端布局求助：按钮与进度条、标签无法垂直对齐

问题分析 #

原代码使用float定位标签和按钮，导致元素脱离正常文档流，vertical-align属性无法生效，同时百分比边距的方式也不利于响应式布局，最终造成三个元素无法在同一行垂直居中对齐。

修复方案 #

通过Flex布局实现元素的水平排列与垂直居中，这是现代CSS中实现对齐的最优方案之一，代码修改如下：

修改后的HTML代码 #

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>AntonPaar User Application</title>
    <script src="script.js"></script>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>

    <h3>Please select a file:</h3>

    <label for="fileList" >File: </label>
    <select id="fileList" onchange="readLines()"></select>

    <br>
    <!-- 新增容器包裹三个元素 -->
    <div class="progress-container">
      <label for="progress-bar" id="barLabel">Progress: </label>
      <div id="progress-bar"></div>
      <button id="break" onclick="abortProgress()">Abort</button>
    </div>
    <br><br>

    <table id="showTable"></table>

  </body>
</html>

修改后的CSS代码 #

/* 新增容器样式，实现Flex布局 */
.progress-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px; /* 元素间的间距 */
}

#progress-bar {
  border:1px solid black;
  height: 20px;
  width: 300px;
  border-radius: 20px;
  /* 移除原有的margin:auto和vertical-align */
}

#loading-bar {
  background: greenyellow;
  border-radius: 20px;
  height: 100%;
}

#barLabel {
  /* 移除原有的float和margin-left */
  white-space: nowrap; /* 防止标签换行 */
}

#break {
  /* 移除原有的float和margin-right */
}

#showTable {
  border:2px solid black;
  border-radius: 20px;
  margin-left: auto;
  margin-right: auto;
}

.show-table-entry {
  border-bottom:1px solid black;
}

.show-table-header {
  border-bottom:2px solid black;
  width: 15%;
}

关键修改点 #

• 新增.progress-container容器，设置display:flex开启Flex布局，align-items:center实现垂直居中，justify-content:center让整个容器内容水平居中，gap控制元素间的间距；
• 移除原代码中#barLabel和#break的float属性，以及#progress-bar的margin:auto，避免破坏文档流；
• 给#barLabel添加white-space:nowrap，防止标签文本在小屏幕下换行。

这样修改后，Progress标签、进度条和Abort按钮就能在同一行实现完美的垂直对齐，同时布局更具响应式特性。

内容的提问来源于stack exchange，提问作者Gahatma