css - fixed top header to show on top of div -
this code uses , bootstrap 3.
how can span class="badge" vertically line left cell content i.e. baseline menuitem? (i tried text alignment no avail ) thank you
body { padding-top: 70px; }
//---main.html------------------------------- <head> <title>tasks</title> </head> <body> <header> <nav class="navbar navbar-default navbar-fixed-top"> <header class="container"> <div class="row"> <h1> <button class="col-xs-2" type="button">☰</button> <label class="col-xs-8 text-center">select item</label> <button class="col-xs-2" type="button">⋮</button> </h1> </div> </header> </nav> </header> <div> {{> mainmenu}} </div> </body> //---main_menu.html------------------------------- <template name="mainmenu"> <div class="container"> <div class="row"> <section class="col-xs-12"> <div class="list-group"> {{#each menuitems}} <a href="#" class="list-group-item"> <img src="/abc.png"> {{menuitem}} <span class="badge">></span> </a> {{/each}} </div> </section> </div> </div> </template>
if list-group-item
s fixed height simplest way handle margin css.
.list-item-group > span.badge { margin-top: 20px; }
other vertical align tricks such line-height
don't work on badges because have specific styles.
here possible related solution:
vertically align bootstrap 3 badge inside heading
note: question not relate meteor, might have better luck getting answers if remove meteor templating snippet.
Comments
Post a Comment