Html webkit-中心链接文本

我试图在webkit浏览器（chrome/safari）上将href元素的文本置于中心位置

这是html：

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

我得到的结果如所附图像所示：

有什么想法吗？ 10倍

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

中间请
.linkText、.linkText:悬停{
保证金：0自动；
背景图片：url（/images/q.png）；
宽度：280px；
背景重复：无重复；
背景色：透明；
边界：无；
字号：18px；
字体大小：正常！重要；
颜色：黑色！重要；
文本阴影：无！重要；
显示：-网络工具包盒；
文本对齐：居中；
-webkit框对齐：居中；
框对齐：居中；
显示：表格单元格；
垂直对齐：中间对齐；
背景色：#ccc；
高度：100px；
}

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

中间请
.linkText、.linkText:悬停{
保证金：0自动；
背景图片：url（/images/q.png）；
宽度：280px；
背景重复：无重复；
背景色：透明；
边界：无；
字号：18px；
字体大小：正常！重要；
颜色：黑色！重要；
文本阴影：无！重要；
显示：-网络工具包盒；
文本对齐：居中；
-webkit框对齐：居中；
框对齐：居中；
显示：表格单元格；
垂直对齐：中间对齐；
背景色：#ccc；
高度：100px；
}

使用显示：内联块或链接css的块。As不是块元素

使用显示：内联块或链接css的块。As不是块元素

为什么不在div中添加文本对齐

否则就用这个

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

中间请

---

为什么不在div中添加文本对齐

否则就用这个

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

中间请

将此添加到您的css中

-webkit-box-pack:center;

它将解决这个问题

在这里查看

将此添加到您的css中

-webkit-box-pack:center;

它将解决这个问题

---

---

在此处查看

我已经尝试过了，但它将文本水平居中，而不是垂直居中。对于垂直对齐，请在具有表格单元格显示的项中插入链接。然后将垂直对齐设置为middle10X，但文本仍然垂直不居中。设置div的高度。我检查了firefox和Chrome上的代码。我已经尝试过了，但文本水平居中，而不是垂直居中。对于垂直对齐，请插入带有表格单元格显示的项中的链接。然后将垂直对齐设置为middle10X，但文本仍然垂直不居中。设置div的高度。我检查它在firefox和ChromeCool上的代码工作情况。你能发布一个吗？为了展示您目前的成果以及我们正在使用的功能。另外，您是否希望使用其他浏览器的用户也能看到它？@DavidThomas我从未使用过JS Fiddle demo，我将尝试在那里发布。@MrLister-这最终将仅用于iPhone浏览器。通过删除显示：-webit框，文本将移动到中心（水平）。然后你需要找出垂直对齐的方法。你能贴一张吗？为了展示您目前的成果以及我们正在使用的功能。另外，您是否希望使用其他浏览器的用户也能看到它？@DavidThomas我从未使用过JS Fiddle demo，我将尝试在那里发布。@MrLister-这最终将仅用于iPhone浏览器。通过删除显示：-webit框，文本将移动到中心（水平）。然后，您需要在“else”中为垂直对齐mnetre找到一些东西：由于

是一个与

类似的块，因此可以用

中心
替换
div
，而不是在DOM树中引入新的
中心。但是，在许多方面应用
text align:center
会更好。为什么建议使用？一种缺乏经验的方法。我对规格不太了解。请记住，谢谢！Re your“else”：由于
是一个与
类似的块，因此可以将
div
替换为
中心
，而不是将新的
中心
引入DOM树。但是，在许多方面应用
text align:center
会更好。为什么建议使用？一种缺乏经验的方法。我对规格不太了解。请记住，谢谢！