Question

此代码使用和引导程序3.

如何使用class =“badge”获得跨度与左侧单元格内容（即带有menuItem的基线）垂直对齐？（我尝试了一些文字对齐无效）谢谢

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>

Answer 1

如果您的list-group-item是固定高度，处理此问题的最简单方法是margin css。

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

其他垂直对齐技巧（例如line-height）不适用于徽章，因为它们已经具有特定的样式。

这是另一种可能的相关解决方案：

Vertically align Bootstrap 3 badge inside heading

注意：你的问题实际上与Meteor无关，如果你从你的片段中删除流星模板，你可能会更幸运获得答案。

固定顶部标题显示在div之上

1 个答案: