文本对齐：中心不居中锚标签答案

【问题标题】：text-align: center not centering anchor tags文本对齐：中心不居中锚标签
【发布时间】：2014-08-04 05:14:33
【问题描述】：

我想在它的 div 中居中我的锚标记。

这是html文件：

<div class="body_div">
  <div class="verticle_center">

    <div id="links">
      ...
      <div id="linkedin" class="fill">
        <a href="#">linkedin</a>
      </div>
      ...
    </div>

  </div>
</div>

这里是 css.scss：

.body_div {
  display: table;
  height: 100%;
  overflow: hidden;
  margin: 0 auto;

  .verticle_center{
    display: table-cell;
    vertical-align: middle;
    padding: 0 5px;
  }
   #linkedin {
    text-align: center;
    color: rgba(26, 132, 188, 1);
    box-shadow: inset 0 -2px 0 rgba(26, 132, 188, 1);
    display: inline;
    margin: 10px 7px;
    padding: 5px 5px;
    font-weight: 700;
    font-size: 15px;
    letter-spacing: 2px;
    text-transform: uppercase;
    background: none;
    z-index: 1;
    cursor: pointer;
    transition:         0.19s ease-in;
    -o-transition:      0.19s ease-in;
    -ms-transition:     0.19s ease-in;
    -moz-transition:    0.19s ease-in;
    -webkit-transition: 0.19s ease-in;
  }

}

但正如这里所见，在蓝色突出显示的区域内，右侧有空间，我希望它居中。

为什么#linkedin{}中的text-align: center;没有居中锚标签，我该如何实现这个效果？

我尝试在锚标记周围和锚标记内添加另一个<div class="center"> 和单独的<p>，但没有成功。图像（对于所有这些试验）最终看起来像这样：

【问题讨论】：

LinkedIn 旁边可能有一个空格。你能验证一下没有空间吗？
@j08691 我已经删除了嵌入的 ruby 代码并用渲染的 HTML 替换它。
@NawedKhan Linkedin 旁边没有空格。如果您查看所有其他链接（投资组合、Github 和博客），您会发现它们也没有居中并且似乎与左侧对齐。
你能做一个小提琴吗？
@AndyHolmes 这是fiddle。我相信下面的解决方案已经解决了它，尽管来自linkedin的n旁边还有一个小空间。

标签： html css anchor centering text-align

【解决方案1】：

当您将display:inline 应用到您的#linkedin div 时，您是在告诉它覆盖一个div 的正常display:block 行为并基本上将它变成一个跨度。内联元素的容器会缩小以适应元素，因此无法居中。

如果您希望链接并排并在其容器中居中，请使用display:inline-block。

【讨论】：

好建议！这个解决方案几乎可以工作，但每个链接的右侧仍有（非常小的）空间。 view here.
display:inline-block 应该折叠元素之间的空白。很可能您在链接上设置了边距。对于#linkedin，左右两边有 7px 的边距。
display:inline-block 已折叠空白。尽管如此，正如您在this fiddle 中看到的那样，“N”旁边还有一个小空格。删除边距对该空白没有影响。我什至开始相信问题可能出在字体上，但即使在更改字体之后，链接后的小空间仍然存在。我对居中非常细致，但我不确定这是否是 css/html 问题了。
你的小提琴仍然有 7px 的边距。另外，只是检查以确保您实际上不是在谈论字母末尾和行尾之间的填充？更新小提琴：jsfiddle.net/BvcP7/1
尽管您已经删除了左右边距和内边距，但在单词的末尾似乎仍有无数的空格。我做了一个diagram 来说明这个空间。