代码之家 › 专栏 › 技术社区 › SilverSurfer

引导4表垂直对齐中间

bootstrap-4 css3 twitter-bootstrap css html

-2

SilverSurfer · 技术社区 · 6 年前

垂直中心 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>

3 回复 | 直到 6 年前

Carol Skelly 6 年前

你需要 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

Jasper Mulder 6 年前

你甚至不需要这个 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>

-1

Xenio Gracias 6 年前

希望这有帮助。。补充 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>