Bootstrap 5中的垂直居中值

vsmadaxz 于 2022-12-07 发布在 Bootstrap

关注(0)|答案(1)|浏览(410)

我根据搜索结果和StackOverflow结果尝试了几种变体，并引用了现有代码。
使用此代码

<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">

<div class="table-row row d-flex flex-column align-items-center">
  <div class="col">
    <span class="align-middle">
      <button type="submit" class="searchbtn emailRemoveBtn float-start align-self-center" name="command" value="Delete email @i">
         <i class="fa-solid fa-xmark sm"></i>
         <span aria-hidden="true"></span>
      </button>
    
      <input readonly class="align-self-center" style="border-style: hidden;" />
    </span>
  </div>
</div>

电子邮件不会垂直居中，如下所示：

我是新手，可能是一些小东西。你看到我错过了什么垂直居中的电子邮件？

twitter-bootstrap

来源：https://stackoverflow.com/questions/73901531/vertically-centering-values-in-bootstrap-5

1条答案

按热度按时间

x6h2sr281#

1.请勿同时使用flexbox和floats。
1.不要使用浮动，除非是文本环绕图像。它们不是用于结构布局，只是用于 * 内容 * 布局。
1.这里不要介绍表行布局（除非您实际上有表格数据）。
1.不要使用行 * 和 * 显式的flex布局。Bootstrap 5行 * 已经 * 应用了flexbox，但是它们需要容器和列，显然这里不需要，每行只有一列。不过，你可以将同样的原则应用到grid行。

justify-content沿着主伸缩轴对齐内容，而不是align-items。
Bootstrap提供了边框类，您可以使用这些类来删除边框。自定义样式应该放在自定义类上，而不是放在标记中。

<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.2.0/css/all.min.css" integrity="sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE+4aHK8yyUHUSCcJHgXloTyT2A==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>

<div class="d-flex flex-column justify-content-center mt-1 py-2  bg-secondary">
  <div class="text-center">
    <button type="submit" class="btn btn-primary searchbtn emailRemoveBtn" name="command" value="Delete email @i">
       <i class="fa-solid fa-xmark sm"></i>
       <span aria-hidden="true"></span>
    </button>

    <input readonly class="align-self-center border-0" />
  </div>
</div>

<div class="d-flex flex-column justify-content-center mt-1 py-2 bg-secondary">
  <div class="text-center">
    <button type="submit" class="btn btn-primary searchbtn emailRemoveBtn" name="command" value="Delete email @i">
       <i class="fa-solid fa-xmark sm"></i>
       <span aria-hidden="true"></span>
    </button>

    <input readonly class="align-self-center border-0" />
  </div>
</div>

赞(0）回复(0）举报 2022-12-07

我来回答

Bootstrap 5中的垂直居中值

1条答案

相关问题

热门标签

最新问答