This specific piece of HTML displays as intended (JSFiddle):
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<style media="screen" type="text/css">
thead th, td {
text-align: center;
}
</style>
<body>
<table class="table table-bordered table-hover">
<tbody>
<tr>
<th>
X<br>Y
</th>
<td style="vertical-align: middle">
<span class="glyphicon glyphicon-remove"></span>
</td>
</tr>
</tbody>
</table>
</body>
However, I am looking to consolidate all CSS properties related to the td element in one place like this (JSFiddle):
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<style media="screen" type="text/css">
thead th, td {
text-align: center;
}
td {
vertical-align: middle;
}
</style>
<body>
<table class="table table-bordered table-hover">
<tbody>
<tr>
<th>
X<br>Y
</th>
<td>
<span class="glyphicon glyphicon-remove"></span>
</td>
</tr>
</tbody>
</table>
</body>
Regrettably, when attempting this structure, it distorts the vertical alignment of the glyphicon.
I'm curious to understand why this occurs and how it can be resolved?