css - Vertically align text in a bootstrap anchor (button) -
i'm struggling vertically align text within bootstrap (3) <a>
when works in <button>
the html :
<button class="btn">some text<span class="glyphicon glyphicon-play pull-right"></span></button> </br> </br> </br> <a href="#" class="btn">some text<span class="glyphicon glyphicon-play pull-right"></span></a>
the css :
.btn { width: 315px; height: 40px; background-color: #ff38a4; color: #fff; display: inline-block; margin-bottom: 0; font-weight: normal; text-align: left; vertical-align: middle; -ms-touch-action: manipulation; touch-action: manipulation; cursor: pointer; background-image: none; border: 1px solid transparent; white-space: nowrap; padding: 4px 8px; font-size: 14px; line-height: 1.42857143; border-radius: 0; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-box-shadow: 2px 2px 2px 0 rgba(0, 0, 0, 0.5); -moz-box-shadow: 2px 2px 2px 0 rgba(0, 0, 0, 0.5); box-shadow: 2px 2px 2px 0 rgba(0, 0, 0, 0.5); }
and output :
and codepen of problem : http://codepen.io/anon/pen/vyoaao
how align text , icon centrally using <a>
tag?
why use </br></br></br>
? vertical-align bootstrap 3 might you
Comments
Post a Comment