在居中窗体中添加响应式图像

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

我已经检查过(将图标放在表单中的输入元素内 - 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;
}

Answer 1

您必须为form和绝对图标创建一个div相对;将自定义宽度添加到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, 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>