無法在引導表中進行垂直對齊：中間工作
[英]Can not make vertical-align:middle work in a bootstrap table
問題描述
更新
基於 jme11 答案，d-flex 阻止了對齊，但是如果沒有 d-flex，則列完全混亂（使用引導程序 4）要重新編寫：（第一行應該居中對齊，但事實並非如此）
http://jsbin.com/fafoweleka/1/edit?html,css,output
語境
我想在 bootstrap 4 表中對齊我的文本。 我正在嘗試使用vertical-align:middle ，但文本仍與頂部對齊。
題
我錯過了什么？
標記：
<table class="table">
<tr class="d-flex">
<td class="col-1">1</td>
<td class="col-4" style="vertical-align:middle">Miami</td>
<td class="col-3">4.0</td>
<td class="col-3"></td>
</tr>
</table>
結果：
1 個解決方案
解決方案1
2 已采納 2018-03-06 21:51:08
編輯
如果您想在 tr 元素上使用 d-flex 類以允許在單元格上使用 col 類，您可以通過添加 d-flex 和 align-items-center 類來垂直對齊特定單元格中的文本細胞。
.strecher { height: 200px; } .my-table td { display: flex; align-items: center; }
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" type="text/css" /> <title>JS Bin</title> </head> <body> <script src="https://code.jquery.com/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <h3>For a specific cell:</h3> <table class="table" style="background-color: #eee;"> <tr class="d-flex"> <td class="col-1">1</td> <td class="col-4 d-flex align-items-center">Miami</td> <td class="col-3">4.0</td> <td class="col-3"><div class=strecher></div></td> </tr> </table> <h3>For all cells:</h3> <table class="table my-table" style="background-color: #eee;"> <tr class="d-flex"> <td class="col-1">1</td> <td class="col-4">Miami</td> <td class="col-3">4.0</td> <td class="col-3"><div class=strecher></div></td> </tr> </table> </body> </html>
當父容器指定“ display：table”時，如何使“ vertical-align：middle”起作用？
[英]How to make “vertical-align:middle” work when parent container specifies “display: table”?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.