css - How can I align text with bootstrap glyph-icon? -
my boxes lined 33 not centered, https://jsfiddle.net/y7jqjwsx/
<div class="largestarbox"> <span class="largestar glyphicon glyphicon-star "></span> <span class="largestar glyphicon glyphicon-star "></span> <span class="largestar glyphicon glyphicon-star-empty"></span> <span class="largestar glyphicon glyphicon-star-empty"></span> <span class="largestar glyphicon glyphicon-star-empty "></span> <span class="largestarfont glyphicon ">33</span> </div>
// css
.largestarbox { width: 200px; border: 1px solid black; text-align: center; } .largestar { font-size: 20px; color: #d9ab4d; border: 1px solid black; margin-top: 7px; } .largestarfont { font-size: 20px; color: blue; margin-left: 10px; border: 1px solid black; vertical-align: center; }
i used outer container , inner container vertically align middle number text. outer container has display: table; , inner container has display: table-cell; vertical-align: middle; (vertical-align: center not valid css property).
html
<span class="numberfont"> <span class="number-outer"> <span class="number-inner">33</span> </span> </span>
css
.numberfont { font-size: 15px; color: blue; margin-left: 10px; font-family: 'glyphicons halflings'; -webkit-font-smoothing: antialiased; font-style: normal; font-weight: normal; display: inline-block; position: relative; top: 1px; height: 22px; } .number-outer { display: table; border: 1px solid black; padding: 0px 3px; } .number-inner { display: table-cell; vertical-align: middle; }
i made small css changes match size of star boxes:
wiki
Comments
Post a Comment