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你的#linkedindiv时,你告诉它覆盖display:blockdiv 的正常行为并基本上把它变成一个跨度.内联元素的容器缩小以适合元素,因此居中不起作用.

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