Выровнять по вертикали содержимое абсолютно позиционированного тд в таблице

Question

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

Это мой код, и вы можете видеть, что кнопки записи платежей не центрированы вертикально.

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>
            
       

Есть ли способ разместить кнопки, расположенные вертикально по центру?

Answer 1

Вам нужно указать «высоту» и «дисплей: блок;» к tr o td и чем "line-height" для вертикального выравнивания. Например, если высота равна «высота: 300;» высота строки должна быть «line-height: 300px;»

Ps. Я думаю, что позиция: родственник - правильный выбор

Answer 2

Попробуйте: без позиции 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>

Answer 3

Вам нужно изменить

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

на

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

Вот рабочий фрагмент:

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>