html - webkit - center link text

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

将此添加到您的CSS！

-webkit-box-pack:center;

它将解决问题。

在这里查看http://jsfiddle.net/yscPm/

Answer 2

为什么不将文本对齐添加到 div？

别的用这个

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

Answer 3

标签“a”是内联的，内联标签没有宽度。将显示设置为块

<div>
    <a onclick="check(1);" id="check1" class="linkText">center please</a>
    <style>
        .linkText, .linkText:hover {
            margin: 0 auto;
            background-image: url(/images/q.png);
            width: 280px;
            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;
            display: table-cell; 
                    vertical-align: middle; 
                    background-color: #ccc; 
                    height: 100px;
        }
    </style>
</div>

Answer 4

使用 display:inline-block 或 block 链接 css。As 不是块元素。