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

Question

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

#box {
  box-sizing: border-box;
  border: 1px solid rgb(0, 0, 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, 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;
}

Answer 1

您必须为 form 和绝对图标制作一个 div relative；将自定义宽度添加到 div；然后将 display: block 和 margin: auto 添加到 form 以使其以 axis 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, 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>

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

Add responsive image inside a centered form

html

css

forms

icons

center