html - 文本对齐:中心不居中 anchor 标记

Question

我想将我的 anchor 标记置于其 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;
  }

}

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

为什么是 text-align: center; #linkedin{}内 anchor 标记不居中，如何实现这种效果？

我尝试添加另一个<div class="center">并分别<p>在 anchor 标记周围和 anchor 标记内都没有成功。图像(对于所有这些试验)最终看起来像这样:

Answer 1

当您将 display:inline 应用于您的 #linkedin div 时，您就是在告诉它覆盖正常的 display:block 行为。 div 并基本上将其转换为跨度。内联元素的容器会缩小以适合元素，因此居中不起作用。

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