Anchor goes to whole width when centered

Question

I've one paragraph and one button in my container like this

<div class="container">
       <div class="row">
          <p class="text-center text-muted">text</p>
          <a class="btn btn-danger  center" href="">
            Download PDF 
         </a > 
       </div>            
 </div>

code for my center class is

.center{
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

and this is how output looks like while i was expecting to be in center with small button that should be wide as per its value like Download Pdf

Answer 1

Your style should be like:

.center {
    display: block !important;
    width: 250px; //change accordingly;
    margin-left: auto !important;
    margin-right: auto !important;
}

Margin auto works well with fixed width container.

Or try:

<div style='text-align:center'>
    <a class="btn btn-danger" href="">
        Download PDF 
    </a >
</div>

Just an advice, avoid using too many !important