Anchor button label not aligned

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

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.

Good catch but the CSS is fine, I just copied it from firebug. I'll fix that in this post. Within the app the CSS has opening and closing curly brackets. — AdamT, Sep 28 '11 at 15:23

score 1 · Accepted Answer · answered Sep 28 '11 at 16:45

1

Try using with line-height

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

answered Sep 28 '11 at 16:45

Sanooj

2,637
15
20

I'll second that, matching height to line-height has worked much better for me than trying to use padding. – Sep 28 '11 at 18:33

score 0 · Answer 2 · answered Sep 28 '11 at 15:16

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.

score 0 · Answer 3 · answered Sep 28 '11 at 15:28

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

Anchor button label not aligned

3 Answers3