Bootstrap 5内容垂直居中问题求助：邮件内容无法居中

你的代码里有几个导致输入框内容垂直居中失效的问题，我帮你梳理并修正：

问题根源 #

1. 外层<span class="align-middle">是行内元素，align-middle对内部的button和input无法生效——这个类只适用于行内/表格元素的简单对齐，没法处理复杂布局。
2. 给input加的align-self-center无效，因为它的父元素不是flex容器，这个属性只在flex子元素上起作用。
3. float-start会让button脱离文档流，直接破坏了行内元素的垂直对齐逻辑。

修正后的代码 #

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">

<div class="table-row row d-flex flex-column align-items-center">
  <div class="col w-100">
    <div class="d-flex align-items-center">
      <button type="submit" class="searchbtn emailRemoveBtn me-2" name="command" value="Delete email @i">
         <i class="fa-solid fa-xmark sm"></i>
         <span aria-hidden="true"></span>
      </button>
    
      <input readonly class="flex-grow-1" style="border-style: hidden;" placeholder="example@mail.com" />
    </div>
  </div>
</div>

关键修改说明 #

• 把外层<span>换成<div class="d-flex align-items-center">：用flex布局作为容器，align-items-center会自动让内部所有子元素垂直居中，这是Bootstrap里最可靠的垂直对齐方案。
• 删掉float-start，改用me-2给button和input加右侧间距：浮动会打乱flex布局的对齐，用margin类来控制间距更稳妥。
• 给input加flex-grow-1：让输入框自动占满容器剩余宽度，同时保持和button的垂直对齐。
• 给<div class="col">加w-100：确保内容占满整行，避免居中后宽度过窄的问题。

内容的提问来源于stack exchange，提问作者BenCook