垂直对齐表中绝对定位的td的内容

Question

I have a absolutely positioned td (second td), I want it to align at vertical center even there is content changes in the first td.

I tried using position: relative and transform: properties and all, but nothing seems to worked out.

This is my code, and you can see the record payment buttons are not vertically centered.

 table { width: 600px; font-size: 14px; color: black; font-family: sans-serif; background-color: white; margin-left:0%; border-style: solid;border-color:#eee; overflow-x:scroll; display:table; } table, th, td { border-width: thin; border-collapse: collapse; border-style: solid;border-color:#eee; padding: 20px 10px; } td { text-align: left; } .hover-icons{ position: absolute; right:30px; } .hover-icons ul{ position: absolute; border: 0; top: 50%; right: 0; transform: translate(5%, 33%); background: #EFEFEF; height: auto; display: none; } td{padding:0px 0} .hover-icons ul{ display: flex; } .hover-icons ul li{ margin: 0 6px; } .hover-main-icons .posi-r{position: relative;} .btn-hover-i{ } 

 <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"></link> <table class="hover-main-icons"> <tr> <td>test test<br> test<br> test<br>test<br> testtesttest testt<br>esttest<br>testt<br>est<br>test</td> <td class="hover-icons"> <div class="posi-r"> <ul> <li> <a href=""><button class="btn btn-red-bg btn-hover-i">Record Payment</button></a> </li> <li> <a href=""><button class="btn btn-red-bg btn-hover-i">Record Payment</button></a> </li> <li> <a href=""><button class="btn btn-red-bg btn-hover-i">Record Payment</button></a> </li> </ul> </div> </td> </tr> <tr> <td>test test test test<br>test<br> testtesttest testt<br>esttesttestt<br>est<br>test</td> <td class="hover-icons"> <div class="posi-r"> <ul> <li> <a href=""><button class="btn btn-red-bg btn-hover-i">Record Payment</button></a> </li> <li> <a href=""><button class="btn btn-red-bg btn-hover-i">Record Payment</button></a> </li> <li> <a href=""><button class="btn btn-red-bg btn-hover-i">Record Payment</button></a> </li> </ul> </div> </td> </tr> </table> 

Is there any way to place buttons that are vertically centered?

Answer 1

You need to change

.hover-icons{
  position: absolute;
  right: 30px;
}

to

.hover-icons{
 position: relative;
 right:25%;
}

Here is the working snippet:

 table { width: 600px; font-size: 14px; color: black; font-family: sans-serif; background-color: white; margin-left:0%; border-style: solid;border-color:#eee; overflow-x:scroll; display:table; } table, th, td { border-width: thin; border-collapse: collapse; border-style: solid;border-color:#eee; padding: 20px 10px; } td { text-align: left; } .hover-icons{ position: relative; right:25%; } .hover-icons ul{ position: absolute; border: 0; top: 50%; right: 0; transform: translate(5%, 33%); background: #EFEFEF; height: auto; display: none; } td{padding:0px 0} .hover-icons ul{ display: flex; } .hover-icons ul li{ margin: 0 6px; } .hover-main-icons .posi-r{position: relative;} .btn-hover-i{ } 

 <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"></link> <table class="hover-main-icons"> <tr> <td>test test<br> test<br> test<br>test<br> testtesttest testt<br>esttest<br>testt<br>est<br>test</td> <td class="hover-icons"> <div class="posi-r"> <ul> <li> <a href=""><button class="btn btn-red-bg btn-hover-i">Record Payment</button></a> </li> <li> <a href=""><button class="btn btn-red-bg btn-hover-i">Record Payment</button></a> </li> <li> <a href=""><button class="btn btn-red-bg btn-hover-i">Record Payment</button></a> </li> </ul> </div> </td> </tr> <tr> <td>test test test test<br>test<br> testtesttest testt<br>esttesttestt<br>est<br>test</td> <td class="hover-icons"> <div class="posi-r"> <ul> <li> <a href=""><button class="btn btn-red-bg btn-hover-i">Record Payment</button></a> </li> <li> <a href=""><button class="btn btn-red-bg btn-hover-i">Record Payment</button></a> </li> <li> <a href=""><button class="btn btn-red-bg btn-hover-i">Record Payment</button></a> </li> </ul> </div> </td> </tr> </table> 

Answer 2

You need to give a "height" and "display:block;" to the tr o td and than the "line-height" for the vertical align. For example If the height is "height:300;" the line-height must be "line-height:300px;"

Ps. I think position:relative is the right choise

Answer 3

Try this: without position css

 table { width: 600px; font-size: 14px; color: black; font-family: sans-serif; background-color: white; margin-left: 0%; border-style: solid; border-color: #eee; overflow-x: scroll; display: table; } table, th, td { border-width: thin; border-collapse: collapse; border-style: solid; border-color: #eee; padding: 20px 10px; } td { text-align: left; } td { width: 100%; } .hover-icons ul { background: #EFEFEF; height: auto; display: none; } td { padding: 0px 0 } .hover-icons ul { display: flex; } .hover-icons ul li { margin: 0 6px; } .hover-main-icons .posi-r { position: relative; } .btn-hover-i {} 

 <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"></link> <table class="hover-main-icons"> <tr> <td>test test<br> test<br> test<br>test<br> testtesttest testt<br>esttest<br>testt<br>est<br>test</td> <td class="hover-icons"> <div class="posi-r"> <ul> <li> <a href=""><button class="btn btn-red-bg btn-hover-i">Record Payment</button></a> </li> <li> <a href=""><button class="btn btn-red-bg btn-hover-i">Record Payment</button></a> </li> <li> <a href=""><button class="btn btn-red-bg btn-hover-i">Record Payment</button></a> </li> </ul> </div> </td> </tr> <tr> <td>test test test test<br>test<br> testtesttest testt<br>esttesttestt<br>est<br>test</td> <td class="hover-icons"> <div class="posi-r"> <ul> <li> <a href=""><button class="btn btn-red-bg btn-hover-i">Record Payment</button></a> </li> <li> <a href=""><button class="btn btn-red-bg btn-hover-i">Record Payment</button></a> </li> <li> <a href=""><button class="btn btn-red-bg btn-hover-i">Record Payment</button></a> </li> </ul> </div> </td> </tr> </table>