Flex容器未为图标预留空间：搜索按钮图标重叠居中问题求助

问题重现 #

跟着教程实现搜索栏时，按钮里的搜索图标出现错位重叠，无法正常居中显示，尝试多种CSS修复无效。

当前代码 #

CSS #

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}

body {
  background: #222;
}

.card {
  width: 90%;
  max-width: 470px;
  background: linear-gradient(135deg, #00feba, #5b548a);
  color: #fff;
  margin: 100px auto 0;
  border-radius: 20px;
  padding: 40px 35px;
  text-align: center;
}

.search {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.search input {
  border: 0;
  outline: 0;
  background: #ebfffc;
  color: #555;
  padding: 10px 25px;
  height: 60px;
  border-radius: 30px;
  flex: 1;
  margin-right: 16px;
  font-size: 18px;
}

.search button {
  border: 0;
  outline: 0;
  background: #ebfffc;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  cursor: pointer;
}

.search button img {
  width: 16px;
}

HTML #

<body>
  <div class="card">
    <div class="search">
      <input type="text" placeholder="Enter City Name" spellcheck="false">
      <button><img src="images/search.png"></button>
    </div>
  </div>
</body>

预期效果 vs 实际效果 #

• 预期效果：
• 实际效果：

修复方案 #

问题出在按钮未设置内部元素的居中布局，默认状态下按钮内的img是inline元素，存在基线对齐问题，再加上按钮没有居中样式，导致图标错位。

修改.search button的CSS，添加flex布局来居中内部图标：

.search button {
  border: 0;
  outline: 0;
  background: #ebfffc;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  cursor: pointer;
  /* 添加以下两行 */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 可选：消除inline元素默认间距，确保完全居中 */
.search button img {
  width: 16px;
  display: block;
}

解释 #

• display: flex 将按钮转为flex容器，允许通过flex属性控制内部元素对齐方式
• align-items: center 实现内部元素垂直居中
• justify-content: center 实现内部元素水平居中
• 给img设置display: block，可以消除inline元素默认的底部间距，让图标完全贴合按钮中心

修改后图标即可和预期效果一致，完美居中在圆形按钮内。

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