css - Align number beside glyphicon -
i cannot seem number align inline glyphicon. want number 3 pushed more lines up.
css
body { background-image: url("bg1.png"); } .icons { margin: 0px 0px 0px 10px; } .well { min-height: 20px; padding: 20px; margin-bottom: 20px; background-color: #ecf0f1; border: 1px solid transparent; border-radius: 4px; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05); box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05); } .well blockquote { border-color: #ddd; border-color: rgba(0, 0, 0, 0.15); } .well-lg { padding: 10px; border-radius: 6px; } .well-sm { padding: 9px; border-radius: 3px; } #alertbox { padding: 2px 2px 2px 2px; text-align: center; } #topicon { font-size: 50px; } #stats { font-size: 50px; display: inline-block; float: right; }
html
<div class="col-md-3"> <div class="well well-lg"> <div id="alertbox" class="alert alert-info">total apis</div> <span id="topicon" class="glyphicon glyphicon-tasks"></span> <span id="stats">3</span> </div> </div>
screenshot
using positioning doesnt work when scaling since number 3 go center when on mobile phone. need auto-scale guess smaller browsers.
if remove float #stats
, this:
.well {text-align: justify;} .well:after{content:""; width: 100%; display: inline-block; height: 0;} span {display: inline-block; vertical-align: middle;}
Comments
Post a Comment