2016-02-08 3 views
1

Этот код использует и самонастройки 3.фиксированный верхний заголовок, чтобы показать на вершине DIV

Как я могу получить срок с классом = «значок» вертикально выстраиваться с содержанием левой ячейки, т.е. базовой с MENUITEM? (Я пробовал некоторые выравнивания текста без толка) Спасибо

enter image description here

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">&#9776;</button> 
 
      <label class="col-xs-8 text-center">Select item</label> 
 
      <button class="col-xs-2" type="button">&#8942;</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">&#x3e;</span> 
 
      </a> 
 
      {{/each}} 
 
     </div> 
 
     </section> 
 
    </div> 
 
    </div> 
 
</template>

ответ

2

Если list-group-item s фиксированы высоте самого простого способа справиться с этим является запас CSS.

.list-item-group > span.badge { 
    margin-top: 20px; 
} 

Другие вертикальные трюки выравнивают, такие как line-height не работают на значки, потому что у них уже есть определенные стили.

Вот еще один возможное родственное решение:

Vertically align Bootstrap 3 badge inside heading

Примечание: Ваш вопрос на самом деле не относится к Метеору, вы могли бы лучше повезло получить ответы, если вы удалите метеор из шаблонов вашего сниппета.

Смежные вопросы