idants idants - 23 days ago 6
CSS Question

div inside td - vertical-align: middle. not working

I know that this question has many answers, BUT I couldn't find a good answer that fix my problem.

So, I have a div inside a td. and all I want is to the div will set into the middle of the td, yes that simple!

For the convenience I'm adding this image:

image



.tdClass{
vertical-align:middle;
}

.divClass{
display:inline;
vertical-align:middle;
}

<table border=1>
<tr>
<td>
first field:
</td>
<td>
<textarea rows="4" cols="50"></textarea>
<div class="divClass">
VERTICAL CENTER???
</div>
</td>
</tr>
</table>




Answer

table{
  width: 100%;
}
.tdClass{
  vertical-align:middle;
}

.divClass{
  display:inline;
  vertical-align:middle;
}
textarea{
  display: inline-block;
  vertical-align: middle;
}
<table border=1>
<tr>
  <td>
    first field:
  </td>
  <td>
  <textarea rows="4"></textarea>
    <div class="divClass">
    VERTICAL CENTER???
    </div>
  </td>
</tr>
</table>