CODEWITHSUNDEEP
htmlcss
Eric
Eric

Reputation: 71

DIV loses vertical alignment when adding link. How can I keep it vertically aligned in the middle?

I have got a table with a button in one of the cells. When I make the button a link, the whole button re-aligns to the top of the cell. How can I keep it in the middle?

<table class="table-class-1">
  <tr>
    <td class="td-class-1"><a href="/link"><div class="div-class-1">TEXT IN DIV</div></a>
    </td>
  </tr>
</table>               

.table-class-1 {
    max-width:550px;
    margin: auto;
}

.td-class-1 {
    text-align: center; 
    vertical-align: middle;
}


.div-class-1 {
    background-color: #GGGGGG;
    color: #fff;
    text-align: center;
    vertical-align: middle;
    border-radius: 6px;
    padding: 5px;
    font-size: 18px;
}

Upvotes: 1

Views: 60

Answers (2)

Arun kumar
Arun kumar

Reputation: 160

**This would help you. Simple and promising :) 
Check out  : http://jsfiddle.net/bV253/2/

Upvotes: 1

Pradeep Pansari
Pradeep Pansari

Reputation: 1297

You can try this:

Working Fiddle here

<table class="table-class-1">
  <tr>
    <td class="td-class-1"><a href="/link"><div class="div-class-1">TEXT IN DIV</div></a>
    </td>
  </tr>
</table>

Good Luck....

Upvotes: 2

Related Questions