Bootstrap 4 стола вертикально выровнять по середине

Question

Я пытаюсь вертикально центрировать содержимое этой таблицы с классом align-middle, но оно не работает. Как я могу заставить это работать?

tr, td, p, a {
  border: 1px solid black;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<table class="table table-borderless">
   <tbody>
      <tr>
         <td class="align-middle">
            <p class="font-weight-bold font-italic text-secondary">LoremIpsum:</p>
         </td>
         <td class="align-middle">
            <a href="#">Lorem ipsum</a>,
            <a href="#">dolor sit amet</a>,
            <a href="#">consectetur adipiscing</a>,
            <a href="#">elit ultricies</a>
         </td>
      </tr>
      <tr>
         <td class="align-middle">
            <p class="font-weight-bold font-italic text-secondary">Magna morbi sociis:</p>
         </td>
         <td class="align-middle">
            <a href="#">Link</a>, 
            <a href="#">Link</a>
         </td>
      </tr>
   </tbody>
</table>

Answer 1

Вам даже не нужен класс align-middle.Это поле абзацев по умолчанию, которое прерывает ваше выравнивание.Просто замените абзац на <span> и все готово!

tr, td, p, a {
  border: 1px solid black;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">

<table class="table table-borderless">
   <tbody>
      <tr>
         <td>
            <span class="font-weight-bold font-italic text-secondary">LoremIpsum:</span>
         </td>
         <td>
            <a href="#">Lorem ipsum</a>,
            <a href="#">dolor sit amet</a>,
            <a href="#">consectetur adipiscing</a>,
            <a href="#">elit ultricies</a>
         </td>
      </tr>
      <tr>
         <td>
            <span class="font-weight-bold font-italic text-secondary">Magna morbi sociis:</span>
         </td>
         <td>
            <a href="#">Link</a>, 
            <a href="#">Link</a>
         </td>
      </tr>
   </tbody>
</table>

Answer 2

надеюсь, это поможет .. Добавлено margin:0 !important для тега p

tr, td, p, a {
  border: 1px solid black;
}
p{margin:0 !important}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<table class="table table-borderless">
   <tbody>
      <tr>
         <td class="align-middle">
            <p class="font-weight-bold font-italic text-secondary">LoremIpsum:</p>
         </td>
         <td class="align-middle">
            <a href="#">Lorem ipsum</a>,
            <a href="#">dolor sit amet</a>,
            <a href="#">consectetur adipiscing</a>,
            <a href="#">elit ultricies</a>
         </td>
      </tr>
      <tr>
         <td class="align-middle">
            <p class="font-weight-bold font-italic text-secondary">Magna morbi sociis:</p>
         </td>
         <td class="align-middle">
            <a href="#">Link</a>, 
            <a href="#">Link</a>
         </td>
      </tr>
   </tbody>
</table>

Answer 3

Вам необходимо убрать поле из абзацев (my-0), если вы хотите, чтобы ячейки таблицы выглядели вертикально выровненными.

<td class="align-middle">
    <p class="font-weight-bold font-italic text-secondary my-0">LoremIpsum:</p>
</td>

https://www.codeply.com/go/MIWKNo9GQs