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

Question

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;
}

[Here](http://stackoverflow.com/questions/18649106/div-vertical-align-middle-css) use, `display: table-cell;` — Mr. Alien, Mar 04 '14 at 06:13

score 2 · Answer 1 · answered Mar 04 '14 at 06:23

2

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

answered Mar 04 '14 at 06:23

Pradeep Pansari

1,287
6
10

I cannot figure out what is different here besides `*{margin:0; padding:0;} html, body, table{height:100%;width:100%;}` I am not sure how this impacts the display or how I can then add it to my CSS. My assumption is that is somehow defines the actual height of the module, but I cannot do `height: 100%;` on my page. The height is dynamically determined by the content inside and screen size. – Eric Mar 04 '14 at 16:59

score 1 · Answer 2 · answered Mar 04 '14 at 06:52

1

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

answered Mar 04 '14 at 06:52

Arun kumar

162
4

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

2 Answers2