html - 在居中的表单内添加响应式图像

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 似乎会产生所需的结果......但我想知道是否有办法通过某些嵌套和定位（单独）来实现这一点。

我已经检查过（将图标放在表单中的输入元素内——https: //teamtreehouse.com/community/how-do-i-put-icons-inside-of-input-fields——我如何才能绝对居中在 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;
}

标签： htmlcssformsiconscenter

Answer 1

你必须制作一个div 相对和绝对form的图标；添加自定义宽度；然后添加and使其以轴 x为中心。divdisplay: blockmargin: autoform

#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>