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:

https://jsfiddle.net/rmurph46/7ed4u378/2/





wiki

Comments

Popular posts from this blog

Asterisk AGI Python Script to Dialplan does not work -

python - Read npy file directly from S3 StreamingBody -

kotlin - Out-projected type in generic interface prohibits the use of metod with generic parameter -