changing table height and keeping inside elements centered - css

Question

The css for tr causes the elements inside to not be centered anymore (you can see in the example they're too high up). How should I fix this?
tr {
height: 50px}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<table class="table">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john#example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary#example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july#example.com</td>
</tr>
</tbody>
</table>
</div>

Answer 1

I believe your issue is because your vertical alignment is being set from bootstrap.
If you were to add this, for example, to your CSS:
td, th{
vertical-align:middle !important;
}
You'll find that your text has been vertically centered within the 50px rows. The issue only becomes apparent when your rows have a large enough space within them to allow text the room to be biased towards one side or the other.
Note: the !important declaration is only to fix specificity issues. You can always add classes and/or IDs to allow more specific rules to be set, effectively overriding the default styling coming from bootstrap.
Setting
tr {
height: 50px
vertical-align:middle}
Won't work, simply because of specificity and the fact that the TD/TH elements require the property in this context.
Here's a demo:
http://codepen.io/anon/pen/QEQgdo
Here's a stackoverflow snippet:
tr {
height: 50px}
td, th{
vertical-align:middle !important;}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<table class="table">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john#example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary#example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july#example.com</td>
</tr>
</tbody>
</table>
</div>

Answer 2

Just do:
td {
height: 100px;
vertical-align:middle !important;
}
As you can see:
td {
height: 100px;
vertical-align:middle !important;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<table class="table">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john#example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary#example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july#example.com</td>
</tr>
</tbody>
</table>
</div>

Answer 3

Try using line-height it should center your text without the need of !importent.
tr > td {
height: 50px;
line-height: 50px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<table class="table">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john#example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary#example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july#example.com</td>
</tr>
</tbody>
</table>
</div>