Question

我的Ionic 3应用程序中有ion-badge。它包含ion-button和ion-item。我希望它们都在ion-badge内垂直对齐。我在here中尝试了答案，但它没有用。最后，我需要将这些ion-button和<ion-item> <ion-badge>150</ion-badge> <button ion-button>My Button</button> </ion-item>放在一起。

jq

Answer 1

向ion-item添加课程。

<强> HTML：

<ion-item class="my-item">
  <ion-badge>150</ion-badge>
  <button ion-button>My Button</button>
</ion-item>

并将以下CSS样式添加到ion-label的{{1}}子项。

<强> SCSS：

ion-item

<强>结果：

<强>更新

带有图标的代码和结果添加到按钮：

<强> HTML：

.my-item {
    ion-label {
        display: flex;
        flex-direction: row;
        align-items: baseline
    }
}

<强> SCSS：

<ion-item class="my-item">
    <ion-badge>150</ion-badge>
    <button ion-button icon-end>My Button
        <ion-icon name="arrow-down"></ion-icon>
    </button>
</ion-item>

我还为.my-item { ion-label { display: flex; flex-direction: row; align-items: baseline } ion-icon { margin-left: 5px; } }添加了CSS规则，以便在文本和按钮中的图标之间获得som空间。

<强>结果：

Answer 2

在样式中添加vertical-align：

<ion-badge style="vertical-align: bottom;">150</ion-badge>

Answer 3

证明 - 内容：中心;会工作!!

<!DOCTYPE html>
<html lang="en">
<body>
    <main id="faqs">
        <h2><a href="#" >What is JavaScript?</a></h2>
        <div>
            <p>JavaScript is a programming language that's built into the major web browsers.
            </p>
        </div>
    </main>
    <script>
      var toggle = function() {
        console.log('faqs', faqs)
        console.log('h2Elements', h2Elements)
      };

      window.onload = function() {
          var faqs = document.getElementById("faqs");
          var h2Elements = faqs.getElementsByTagName("h2");

          for (var i = 0; i < h2Elements.length; i++ ) {
            h2Elements[i].onclick = toggle;
          }
      };
    </script>
</body>
</html>

离子徽章的垂直对齐

3 个答案: