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

时间：2018-10-26 08:01:29

标签： html css html-table

我有一个绝对定位的td（第二个td），即使第一个td中的内容发生变化，我也希望它在垂直中心对齐。

我尝试使用position：relative和transform：属性以及所有属性，但似乎没有解决问题。

这是我的代码，您可以看到“付款记录”按钮未垂直居中。

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>

有没有办法放置垂直居中的按钮？

3 个答案:

答案 0 :(得分：1)

您需要更改

.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>

答案 1 :(得分：1)

您需要提供“高度”和“ display：block;”到tr o td，垂直对齐方式是“ line-height”。例如，如果高度为“ height：300;” line-height必须为“ line-height：300px;”

Ps。我认为位置：相对是正确的选择

答案 2 :(得分：1)

尝试一下：没有位置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>

相关问题
最新问题