text-align：center不居中锚标签

Question

我想将我的锚标记放在其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{}没有以锚标记为中心？如何实现此效果？

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

Answer 1

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

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