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
Post a Comment