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

```
Very simple. Just add some `padding-top` to `.cancelLinkButton`. From the looks of it, you probably need about 5px or so.

And depending on the `border-box` value on the element, you may need to decrease the height of the `.cancelLinkButton` the same amount of padding that you add. If you don't know what `border-box` is, then you almost definitely will need to decrease the height.