html - centering a border within a class -


this laughable question reason can't seem align these guys totally centered. reason border box seems to left , not sure why. can help...

jsfiddle. http://jsfiddle.net/greggy_coding/b3k9lhfz/4/

the html , css

<div class="container-bottom">             <a href="http://www.google.com" target="_blank" class="linkbutton">learn more</a>             <h4><span></span>click find out more </h4>             </div>   body {     background: #fff; }  .container-bottom h4 {   font-weight: 500;   font-size : 16px ;   text-align:center;   color: #fff;   margin-left : auto;   margin-right : auto; }  .linkbutton{     border: 2px solid #fff;     padding: 10px 50px;      width: 50px;     border-radius: 30px;     margin: auto;     position: relative; } .container-bottom{     background-color: #000;     width: 300px;     height:20%;     padding: 25px;     position: relative;    margin-left: auto ;   margin-right: auto ;   margin-top:30px;    } 

the link inline margin: auto; isn't going work.

use text-align: center; on parent element instead.

.container-bottom {     . . .      text-align: center; } 

Comments

Popular posts from this blog

python - TypeError: start must be a integer -

c# - DevExpress RepositoryItemComboBox BackColor property ignored -

django - Creating multiple model instances in DRF3 -