我已經根據搜索結果和 StackOverflow 結果并參考了現有代碼嘗試了幾種變體。
使用此代碼
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/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>電子郵件不會垂直居中，如下所示：
我對此很陌生，它可能很小。你看到我在垂直居中電子郵件時缺少什么嗎？
uj5u.com熱心網友回復：
- 不要同時使用flexbox和浮動。
- 根本不要使用浮點數，除了在影像周圍環繞文本。它們不用于結構布局，僅用于內容布局。
- 不要在此處引入表格行布局（除非您實際上有表格資料）。
- 不要使用行和顯式的彈性布局。Bootstrap 5 行已經應用了flexbox，但它們需要容器和列，您顯然在這里不需要，每行只有一列。不過，您可以將相同的原則應用于網格行。
justify-content沿主 flex 軸對齊內容，而不是align-items.- Bootstrap 提供了可用于移除邊框的邊框類。無論如何，自定義樣式都應該放在自定義類上，而不是放在標記中。
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/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>轉載請註明出處，本文鏈接：https://www.uj5u.com/net/512237.html
標籤：htmlcss推特引导引导程序 5