Can not make vertical-align:middle work in a bootstrap table
Question
Update
Based on jme11 answer the d-flex is preventing the alignment, however without d-flex the columns are totally messed up (using bootstrap 4) To reporoduce: (first row should be aligned middle, but it is not)
http://jsbin.com/fafoweleka/1/edit?html,css,output
Context
I would like to align my text in a bootstrap 4 table. I am trying to use vertical-align:middle , but text is still aligned to top.
Question
What am I missing?
Markup:
<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>
Result:
1 answers
solution1
2 ACCPTED 2018-03-06 21:51:08
EDIT
If you want to use the d-flex class on the tr elements to allow for use of the col classes on the cells, you can align the text in a specific cell vertically by adding d-flex and align-items-center class to that cell.
.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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.