Question

here is the structure of my html

<style>
  .left {
    float:left;
    width: 450px;
  }
  .center {
    float:left;
    width: 150px;
  }
  .right {
    float:right;
    width:450px;
  }
</style>
<div>
  <div class="left">
  </div>
  <div class="center">
    <a href="javascript:someOnclick();">Add</a>
  </div>
  <div class="right">
  </div>
</div>

The content of the left div is a table loaded via ajax. What I would like to do is have the link vertically centered (or darn close) dynamically so that when teh table is loaded and that div changes in height my link then moves appropriately. I’ve created a grid view control on this table and based on the selected value I want to use the link to populate the right column. Any help would be appreciated. The center div has a fixed width but height would probably fill the containing div to allow for vertically centering.

Answer 1

<style>Update
  .left {
    float:left;
    width: 450px;
  }
  .center {
    width: 150px;
    margin-left:auto;
    margin-right:auto;
  }
  .right {
    float:right;
    width:450px;
  }
</style>
<div>
  <div class="left">
  </div>
  <div class="center">
    <a href="javascript:someOnclick();">Add</a>
  </div>
  <div class="right">
  </div>
</div>

P.D: Don’t forget to tick , thanks 😀