Search code examples
csspositioningstyling

CSS How to properly replace links by button background

I'm trying to replace the links on my app with a button background. However the link text won't center horizontally neither vertically. I'm using the property "background-position: center center;" which I assume would solve my problem.

My HTML:

<a class="violetButtonLarge" href="#">My Link</a>

CSS:

.violetButtonLarge {
    display: block; 
    width: 304px; 
    height: 41px;
    background: url(../images/violetButton_large.png) no-repeat center center;
    border:none;
    color: #FFFFFF;
    font-weight: bold;
    font-family: Arial;
    background-color: transparent;
    text-decoration: none;
}

My image:

enter image description here

What I'm I doing wrong here? This is what I get:

enter image description here

Thanks in advance!

Solution

  • Use text-align:center and line-height:41px to align the text in the vertical and horizontal center. 

    .violetButtonLarge {
    display: block; 
    width: 304px; 
    height: 41px;
    background: url(https://i.sstatic.net/S8zvb.png) no-repeat center center;
    border:none;
    color: #FFFFFF;
    font-weight: bold;
    font-family: Arial;
    background-color: transparent;
    text-decoration: none;
    text-align:center;
    line-height:41px;
}

    Example: http://tinkerbin.com/q5VZR1At