[英]Vertically align icon inside search bar
I know this question seems silly, so I want to apoligize in advance. 我知道这个问题似乎很愚蠢,所以我想提前提出要求。
I have this input below: 我在下面输入以下内容: where everything seems fine until I add a label on top like below: 一切似乎很好,直到我在顶部添加标签,如下所示:
This is what I have at the moment: 这是我目前所拥有的:
.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>
The height here is not helping and I would like to make the icon always hotizontally aligned with the input, without worrying how many divs I can put on top. 此处的高度无济于事,我想使图标始终与输入保持一致,而不必担心我可以在顶部放置多少个div。
Which is the best practice for this problem? 哪个是解决此问题的最佳方法? Thank you. 谢谢。
Consider putting a wrapper around just the <input/>
and the <button class="icon"></button>
so that the relative position is not disturbed if you add a label outside of the wrapper: 考虑只在<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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.