CODEWITHSUNDEEP
htmlcsshtml-table
charan kumar
charan kumar

Reputation: 2157

Vertical align the content of absolutely positioned td in table

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?

Upvotes: 0

Views: 59

Answers (3)

Vikas Jadhav
Vikas Jadhav

Reputation: 4692

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>

Upvotes: 1

Alessio Circhirillo
Alessio Circhirillo

Reputation: 11

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

Upvotes: 1

rojadesign
rojadesign

Reputation: 385

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>

Upvotes: 1

Related Questions