Question

I am trying to center the text of an href element, on webkit browsers (chrome/safari).

This is the html:

<div>
        <a onclick="check(1);" id="check1" class="linkText">center please</a>
</div>

The css is:

.linkText, .linkText:hover
 {
margin: 0 auto;
background-image:url(/images/q.png);
width:280px;
height:57px;
background-repeat:no-repeat;
background-color:Transparent;
border:none;
font-size:18px;
font-weight:normal !important;
color:Black !important;
text-shadow: none !important;
display: -webkit-box;
text-align:center;
-webkit-box-align: center;
box-align: center;
    }

The result I get is shown in the image attaced:

Any ideas?
10X!

Answer 1

Add this to your css!

-webkit-box-pack:center;

It will solve the issue.

See it here http://jsfiddle.net/yscPm/