在居中表单中添加响应式图像

如何解决在居中表单中添加响应式图像

#search-box {
  position: relative;
  width: 100%;
  height: 10rem;
}

#box {
  box-sizing: border-box;
  border: 1px solid rgb(0,0.2);
  border-radius: 25px;
  width: 20rem;
  height: 2.8rem;
}

#mag-container {
  position: absolute;
  top: 1rem;
  left: 1.3rem;
}

#mag {
  opacity: 50%;
  width: 1rem;
}

<div id="search-box">
  <input type="text" name="search" class="search-tool" id="box" />
  <span id="mag-container">
        <img
          src="https://res.cloudinary.com/permalik/image/upload/q_50/v1609564792/magnifying-glass.svg"
          alt="magnifying glass"
          class="search-tool"
          id="mag"
        />
      </span>
</div>

我试图在表单内放置一个图标（而表单本身是居中的。）

使用背景图像，某种形式的 flex、transform 或 bootstrap 似乎产生了预期的结果......但我想知道是否有办法通过某些嵌套和定位（单独）来实现这一点。

>

我已经检查过（Put icon inside input element in a form -- https://teamtreehouse.com/community/how-do-i-put-icons-inside-of-input-fields -- How can I center an absolutely positioned element in a div? -- 等等。）

我找到的答案并没有完全解决我的问题。

虽然我可以继续使用背景图片，但我只是好奇这是否可以实现。

感谢您的时间和努力。

     <div id="search-box">
      <input type="text" name="search" class="search-tool" id="box" />
      <span id="mag-container">
        <img
          src="https://res.cloudinary.com/permalik/image/upload/q_50/v1609564792/magnifying-glass.svg"
          alt="magnifying glass"
          class="search-tool"
          id="mag"
        />
      </span>
    </div>

#search-box {
  position: relative;
  width: 100%;
  height: 10rem;
}

#box {
  box-sizing: border-box;
  border: 1px solid rgb(0,0.2);
  border-radius: 25px;
  width: 20rem;
  height: 2.8rem;
}

#mag-container {
  position: absolute;
  top: 1rem;
  left: 1.3rem;
}

#mag {
  opacity: 50%;
  width: 1rem;
}

解决方法

您必须为 div 和 绝对 图标创建一个 form 相对；为 div 添加自定义宽度；然后将 display: block 和 margin: auto 添加到 form 使其以轴 x 为中心。

#search-box {
  position: relative;
  width: 100%;
  height: 10rem;
}

.centered-form{
  position: relative;
  display: block;
  margin: auto;
  width: 20rem;
  height: 2.8rem;
}

#box {
  box-sizing: border-box;
  border: 1px solid rgb(0,0.2);
  border-radius: 25px;
  display: block;
  width: 100%;
  height: 100%;
  padding-left: 45px;
}

#mag-container {
  position: absolute;
  top: 1rem;
  left: 1.3rem;
  background: transparent;
  border: 0;
  padding: 0;
  outline: 0;
  z-index: 1;
  cursor: pointer;
}

#mag {
  opacity: 50%;
  width: 1rem;
}

<div id="search-box">
<div class="centered-form">
  <input type="text" name="search" class="search-tool" id="box" />
  <button type="button" id="mag-container">
        <img
          src="https://res.cloudinary.com/permalik/image/upload/q_50/v1609564792/magnifying-glass.svg"
          alt="magnifying glass"
          class="search-tool"
          id="mag"
        />
      </button>
      </div>
</div>