webkit - 中心链接文本

Question

我试图在webkit浏览器（chrome / safari）上将href元素的文本居中。

这是html：

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

css是：

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

我得到的结果显示在图像中：

有什么想法吗？ 10X！

Answer 1

将此添加到您的CSS！

-webkit-box-pack:center;

它将解决问题。

在此处查看http://jsfiddle.net/yscPm/

Answer 2

标记“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 3

使用display：inline-block或block for link css。因为不是块元素。

Answer 4

为什么不在div中添加text-align？

否则请使用此

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