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

如果要使表格单元格垂直对齐，则需要remove the margin（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

Answer 2

您甚至不需要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 3

希望这会有所帮助。.为p标签添加了margin:0 !important

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>

Bootstrap 4表垂直对齐中间

3 个答案: