如何使用Bootstrap实现hr标签上方文本与按钮基线对齐

解决方案 #

修改后的代码可直接实现对齐效果：

<div className="position-relative">
    <hr/>
    <div className="position-absolute end-0 bottom-100 mb-2 d-flex align-items-center">
      <p className="mb-0 me-2">Logged in as {user?.email}</p>
      <button onClick={handleLogout} className="btn btn-primary">Logout</button>
    </div>
</div>

改动说明 #

• align-baseline类需要作用在flex容器上才会生效，此处直接给包裹文本和按钮的flex容器新增align-items-center类，更适配文本与按钮的垂直对齐场景
• 将定位属性从bottom-0改为bottom-100，让整组内容显示在hr的上方而非下方，新增mb-2控制内容与hr的间距
• 移除按钮上多余的m-1外边距，消除按钮自带的上下边距对对齐的干扰，将间距调整为p标签的me-2，间距控制更统一
• 保留p标签的mb-0类，消除p标签默认的下外边距

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