изменение высоты стола и поддержание внутренних элементов в центре

Question

Css для tr заставляет элементы внутри больше не центрироваться (вы можете видеть в примере, что они слишком высоки). Как мне это исправить?

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

Я считаю, что ваша проблема в том, что ваше вертикальное выравнивание создается из начальной загрузки.

Если вы должны были добавить это, к примеру, ваш CSS:

td, th{ 
    vertical-align:middle !important; 
     } 

Вы обнаружите, что ваш текст был центрирован в пределах 50px строк. Проблема становится очевидной только тогда, когда ваши ряды располагают достаточно большим пространством, чтобы текст мог смещаться в сторону одной или другой стороны.

Примечание: Важная декларация - только для устранения проблем с конкретностью. Вы всегда можете добавлять классы и/или идентификаторы, чтобы можно было установить более определенные правила, эффективно переопределяя стиль по умолчанию, исходящий из бутстрапа.

Установка

tr { 
height: 50px 
vertical-align:middle} 

не будет работать, просто из-за специфики и тот факт, что TD элементы/TH требуется свойство в этом контексте.

Вот демо: http://codepen.io/anon/pen/QEQgdo

Вот StackOverflow фрагмент:

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

Попробуйте использовать line-height он должен центрировать текст без необходимости !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>

Answer 3

Вобще:

td { 
    height: 100px; 
    vertical-align:middle !important; 
} 

Как вы можете видеть:

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>