CODEWITHSUNDEEP
htmltwitter-bootstrapcssbootstrap-4
SilverSurfer
SilverSurfer

Reputation: 4365

Bootstrap 4 table vertical align middle

Im trying to vertically center the content of this table with align-middle class but it doesn´t work. How can I make it works?

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>

Upvotes: 1

Views: 11141

Answers (3)

Carol Skelly
Carol Skelly

Reputation: 362840

You need to remove the margin from the paragraphs (my-0) if you want the table cells to appear vertically aligned..

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

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

Upvotes: 9

Xenio Gracias
Xenio Gracias

Reputation: 2758

hope this helps.. Added margin:0 !important for p tag

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>

Upvotes: -1

Jasper Mulder
Jasper Mulder

Reputation: 303

You don't even need the align-middle class. It's the default margin of the paragraphs who is interrupting your alignment. Just replace the paragraph into an <span> and you're done!

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>

Upvotes: 0

Related Questions