Один из способов добиться этого - использовать position
.
. Вы начнете с создания <th style="position: relative;">
, что позволит расположенным внутри него элементам соблюдать свои собственные границы.
Далее, вы бы взяли ваш <a>
внутрь и сделали его position: absolute;
, как показано ниже:
th > a {
position: absolute;
//these two rules put it vertically centered no matter what inside of the container
top: 50%;
transform: translateY(-50%);
//and then set the right to however far you'd like it away from the right side of the <th>
right: 20px;
}
Возможно, вы также захотите text-align: center;
<a>
Таким образом, значок всегда находится в центре, как он отображается.Но это правило должно позволить вам стать намного ближе к тому, что вы ищете.
РЕДАКТИРОВАТЬ: Добавлены обновления для скрипки для вас http://jsfiddle.net/2468jgew/
EDIT2: Вот еще один пост StackOverflow, объясняющий правила, которые я вам изложил Преобразование: перевод (-50%, -50%)