Question: I can't seem to align the label of an anchor tag that's been made to look like a button.

Cancel label is clearly off. I would like it to be aligned with the Next button's label. We need the Cancel button to be an anchor tag because this site needs to work without Javascript.

![enter image description here](https://i.stack.imgur.com/VnJGa.png)

Anyone have any ideas?

```
<div class="submit-voucher footer">
  <a href="@Model.ReturnUrl.ToString()" class="cancelLinkButton button cancel">Cancel</a>
  <input class="button default" type="submit" name="submit" value="Next" />
</div>

```

Here's the CSS from Firebug for the Cancel link/button:

```
a, a:active, a:visited {
    color: #0066DD;
    text-decoration: none;
}
.cancelLinkButton {
    height: 22px;
    vertical-align: middle;
 }
.button, input[type="submit"], input[type="button"], button {
    background: -moz-linear-gradient(center top , #FDFDFD 0%, #EBEBEB 60%) repeat scroll 0 0 transparent;
    border: 1px solid #BBBBAF;
    display: inline-block;
    padding: 0 20px;
    width: auto;
   }

```

Here's the CSS for the DIV:

```
.submit-voucher.footer {
    text-align: right;
    vertical-align: middle;
    border: 0 none;
    font: inherit;
    margin: 0;
    padding: 0;
  }

```

Thanks for the help.

EDIT: Added closing curly brackets to code in post.

Answer: 
Try using with line-height 

```
.cancelLinkButton {
    height: 22px;
    vertical-align: middle;
    line-height:22px;
 }

```
You are setting the CancelLinbutton property somewhere esle that is overriding the one you are setting below. Find out all the CSS references to cancelbutton and see what properties is actually use. You can use F12 and see which properties have been applied and which have been overridden.

```
.cancelLinkButton {
    height: 22px;
    vertical-align: middle;
}

```