在div中居中<a>标签

Question

目前我的按钮有问题.我希望能够将我的'a'标记居中,但此刻它只会粘在左侧.我尝试过使用"display:block",但是这会让我的按钮占据任何div的全宽.

HTML:

<a href="#" class="button blue">Apply Now</a>

CSS:

.button {
    padding:1em;
    text-align: center;
    display:inline-block;
    text-decoration: none !important;
    margin:0 auto;

    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}

Answer 1

使用div将链接居中

.button {
    padding:1em;
    text-align: center;
    display:inline-block;
    text-decoration: none !important;
    margin:0 auto;

    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}

.container{
  width: 100%;
  text-align: center;
}

<div class="container">
  <a href="#" class="button blue">Apply Now</a>
</div>