如何将标签或段落准确地放在/绑定项目顶部？答案

【问题标题】：How can I put/bind labels or paragraphs exactly on top of items?如何将标签或段落准确地放在/绑定项目顶部？
【发布时间】：2020-01-18 19:58:29
【问题描述】：

我想将这些标签准确地放置在项目的顶部。我只是试着先放<ion-label>。它实际上位于项目的顶层，但不是以它们为中心，而是在它们的左侧。我应该添加什么使其在顶部居中？我不知道我可以在这里应用任何 CSS ...... 我添加了<ion-col>，但现在我的复选框不再是圆形的了。

 <ion-row>
     <ion-label>Global</ion-label>
       <ion-item mode="ios" lines="none">
         <ion-icon name="globe"></ion-icon>
           <ion-checkbox></ion-checkbox>
       </ion-item>
      <ion-label>Lokal</ion-label>
        <ion-item mode="ios" lines="none">
          <ion-icon name="pin"></ion-icon>
            <ion-checkbox></ion-checkbox>
        </ion-item>
      <ion-label>Mann</ion-label>
        <ion-item mode="ios" lines="none">
          <ion-icon name="male"></ion-icon>
            <ion-checkbox></ion-checkbox>
       </ion-item>
  </ion-row>

CSS：

 @import "../../theme/mixins/checkbox-tag";
.checkbox-list {
  .checkbox-item {
    --padding-start: var(--page-margin);
    --padding-end: var(--page-margin);
    --inner-padding-end: 0px;



    ion-checkbox {
      margin-inline-end: 0px;
    }
  }
}

.checkbox-tags {
padding: 2%;


    @include checkbox-tag();

.checkbox-tag {
  padding: 4.5%;

}

CSS 导入：

@mixin checkbox-tag() {
    // Default values
    --checkbox-tag-color: #000;
    --checkbox-tag-background: #FFF;
    --checkbox-tag-active-color: #FFF;
    --checkbox-tag-active-background: #000;

      .checkbox-tag {
      // Reset values from Ionic (ion-item) styles
          --padding-start: 0px;
      --inner-padding-end: 8px;
          --inner-padding-start: 8px;
          --ion-item-background: var(--checkbox-tag-background);
      --ion-item-color: var(--checkbox-tag-color);

      &.rounded-tag {
              --border-radius: 2.2rem;
          }

          &.item-checkbox-checked {
        --ion-item-background: var(--checkbox-tag-active-background);
        --ion-item-color: var(--checkbox-tag-active-color);
          }



          .tag-label {
              margin: 5px;
        font-size: 50px;
        font-weight: 500;
        letter-spacing: 0.2px;
        text-align: center;
          }

          ion-checkbox {
              margin: 0px;
              // To hide the .checkbox-icon
              width: 0px;
              --border-width: 0px;
              height: 0px;
              // We cant set width and height for .checkbox-icon .checkbox-inner, so lets hide it changing its color
              --color-checked: transparent;
          }
      }
  }

【问题讨论】：

你能提供一些你想要的示例图片吗？
@MDKhali 你看到错误了吗？

标签： html css ionic-framework sass ionic4

【解决方案1】：

如果你只想要标签中心和顶部，然后在标签上的 CSS 下面应用

display: block;
width: 100%;
text-align: center;

【讨论】：

为了使您的解决方案有效，我必须添加<ion-col>，但这会使我的复选框项目向右加长。
你能把你的 CSS 放上去吗，因为我检查出了什么问题。
添加了我正在使用的秒数和导入

【解决方案2】：

将此网格与行和列一起使用而不是离子网格，看看它是否适用于<div class="ui-grid ui-grid-responsive ui-fluid"> <div class="ui-grid-row"> <div class="ui-grid-col-2 ui-inputgroup">

【讨论】：

如果我应用该 html，我会得到 8 个长复选框项目，每个项目位于下一个项目的顶部，并且图标不在中间，而是在右侧。我也不知道在这里应用哪个 css。