css 对齐图标与文本框引导

mbskvtky 于 2023-02-10 发布在其他

关注(0)|答案(2)|浏览(135)

我希望图标与文本框对齐并在容器上居中
我试过这个，但图标停留在文本框上方

<div class="container d-flex justify-content-center" id="baseContainer">
    <div class="row">
        <input type="text" class="input-form col-sm-3 offset-sm-0" id="searchForm" placeholder="Busque um filme ou série">
        <i class="fa-solid fa-magnifying-glass col-sm" onclick="foo()"></i>
    </div>
</div>

如果我删除行和容器div，保持我想要的方式，但不居中

css

来源：https://stackoverflow.com/questions/75368387/align-icon-with-textbox-bootstrap

2条答案

按热度按时间

q3qa4bjr1#

将类align-items-center添加到行

<div class="container d-flex justify-content-center" id="baseContainer">
    <div class="row align-items-center">
        <input type="text" class="input-form col-sm-3 offset-sm-0" id="searchForm" placeholder="Busque um filme ou série">
        <i class="fa-solid fa-magnifying-glass col-sm" onclick="foo()"></i>
    </div>
</div>

赞(0）回复(0）举报 2023-02-10

mpgws1up2#

您可以使用Flexbox垂直对齐搜索图标：

<div class="container d-flex justify-content-center" id="baseContainer">
  <div class="row">
    <input
      type="text"
      class="input-form col-sm-3 offset-sm-0"
      id="searchForm"
      placeholder="Busque um filme ou série"
    />
    <i
      class="fa-solid fa-magnifying-glass col-sm d-flex align-items-center"
      onclick="foo()"
    ></i>
  </div>
</div>

赞(0）回复(0）举报 2023-02-10

我来回答

css 对齐图标与文本框引导

2条答案

相关问题

热门标签

最新问答