How can I vertically center the element/text in a table datatd element, which fills the entire height of its parent table row tr? I figure flexbox is the best approach here.
Here's what I've tried so far: https://jsfiddle.net/3tr0cn4s/1/
Asked
Active
Viewed 1,864 times
-1
dippas
- 49,171
- 15
- 93
- 105
Johnny Metz
- 3,186
- 6
- 40
- 97
2 Answers
5
You don't need flex for this: Since it's a table cell, it's enough to add
.table > tbody > tr > td.cell {
vertical-align: middle;
}
https://jsfiddle.net/1jp53m1q/1/
(The long selector is necessary to overwrite an existing rule that aligns cell contents at the top)
Johannes
- 53,485
- 15
- 52
- 104
0
Check out the code below:
td.cell {
padding: 0 !important;
line-height: 100% !important;
vertical-align: middle !important;
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<table class="table">
<thead>
<tr>
<th>Molecule</th>
<th>Rank</th>
</tr>
</thead>
<tbody>
<tr>
<td class="cell"><span>CO<sub>2</sub></span></td>
<td>
<select class="form-control">
<option>23</option>
<option>24</option>
</select>
</td>
</tr>
<tr>
<td class="cell"><span>SO<sub>4</sub></span></td>
<td>
<select class="form-control">
<option>23</option>
<option>24</option>
</select>
</td>
</tr>
</tbody>
</table>
izulito
- 492
- 3
- 12
-
Normally don't like to specify`!important` anywhere in my css. This works though thanks – Johnny Metz Oct 18 '17 at 22:07
-
I agree, I was just trying to point out what properties you need to remove. – izulito Oct 18 '17 at 22:09