html - webkit-センターリンクテキスト

Question

href要素のテキストをWebkitブラウザー（chrome / safari）の中央に配置しようとしています。

これは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;
    }

私が得た結果は、添付の画像に示されています。

何か案は？10倍！

Answer 1

これをCSSに追加してください！

-webkit-box-pack:center;

それは問題を解決します。

こちらをご覧くださいhttp://jsfiddle.net/yscPm/

Answer 2

divにtext-alignを追加してみませんか？

それ以外の場合はこれを使用します

<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

link cssにはdisplay：inline-blockまたはblockを使用します。ブロック要素ではありません。