html - 垂直对齐搜索栏内的图标

Question

我知道这个问题看起来很傻，所以我想提前道歉。

我在下面有这个输入: 一切看起来都很好，直到我在顶部添加标签，如下所示:

这是我目前拥有的:

.inputWrapper {
    display: flex;
    flex-direction: row;
    align-items: center;
    height: min-content;
    position: relative;
}    

.icon {
    height: 2.1rem;
    position: absolute;
    right:0;
    font-size: fontSizeBig;
    background: transparent;
    padding: .6rem;
    align-items: center;
    justify-content: center;
    transition: transform 0.5s ease-out;
}

<div class='inputWrapper'>
    <input/>
    <button class='icon'>
        <icon/>
    </button>
</div>

这里的高度没有帮助，我想让图标始终与输入对齐，而不用担心我可以在顶部放置多少 div。

解决此问题的最佳做法是什么？谢谢。

Answer 1

考虑在 <input/> 周围放置一个包装器和 <button class="icon"></button>这样，如果您在包装器外部添加标签，则相对位置不会受到干扰:

<div class='outerWrapper'>
    <label><!-- Will not disturb inputWrapper --></label>
    <div class='inputWrapper'>
        <input/>
        <button class='icon'>
            <icon/>
        </button>
    </div>
</div>