text-align: center not centering anchor tags

Question

I want to center my anchor tag within its div.

Here is the html file:

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

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

  </div>
</div>

And here is the 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;
  }

}

But as seen here, within the blue highlighted area there is space to the right and I want it to be centered.

Why is the text-align: center; within the #linkedin{} not centering the anchor tag and how do I achieve this effect?

I have tried to add another <div class="center"> and separately <p> around the anchor tags and within the anchor tags with no success. The image (for all these trials) ended up looking like this:

Answer 1

When you apply display:inline to your #linkedin div, you are telling it to override the normal display:block behavior for a div and basically turning it into a span. The container for inline elements shrinks to fit the element so centering won't work.

If you want the links side-by-side and centered in their container, use display:inline-block.