如何让标签的内容从页面的开头开始而不是从中心开始？

Question

为了在离子3中制作带有滑动标签的页面，我尝试了一个来自互联网的例子来达到我的目标＆gt;＆gt; （滑动标签）

它工作正常且不错，但每个标签的内容在页面的中心对齐，我不希望它像那样，我希望内容从页面的开头开始，就像正常一样。

我一直在搜索并试图改变它，但我找不到使标签内容在页面中心对齐的代码部分。

这是我的HTML代码：

<ion-header >
    <ion-navbar>
        <ion-title>
            Latest Addition
        </ion-title>
    </ion-navbar>
</ion-header>

<ion-content>

    <ion-segment  class="SwipedTabs-tabs"  >
        <ion-segment-button *ngFor='let tab of tabs ; let i = index ' value="IngoreMe" (click)="selectTab(i)"
        [ngClass]='{ "SwipedTabs-activeTab" : ( this.SwipedTabsSlider  && ( this.SwipedTabsSlider.getActiveIndex() === i || (  tabs.length -1 === i&& this.SwipedTabsSlider.isEnd()))) }' >
            {{tab}}
        </ion-segment-button>
    </ion-segment>

    <!-- here is our dynamic line  "indicator"-->
    <div id='indicator' class="SwipedTabs-indicatorSegment" [ngStyle]="{'width.%': (100/this.tabs.length)}"></div>

    <ion-slides #SwipedTabsSlider  (ionSlideDrag)="animateIndicator($event)"
                            (ionSlideWillChange)="updateIndicatorPosition()"
                            (ionSlideDidChange)="updateIndicatorPosition()"
                            (pan)="updateIndicatorPosition()"
                            [pager]="false"
                >
        <ion-slide padding>
            <ion-list>
                <ion-item *ngFor="let a of adminL">
                        <ion-thumbnail item-start>
                                <img [src]="a.image"/>
                              </ion-thumbnail>
                        <ion-card color="k1">
                                <ion-card-header>
                                    {{a.name}} in {{a.city}} city
                                </ion-card-header>
                                <ion-card-content>
                                    {{a.address}} <br>
                                    {{a.description}} <br>

                                </ion-card-content>
                            </ion-card>     
                </ion-item>
            </ion-list>
        </ion-slide>
        <ion-slide>
                <ion-list>
                        <ion-item *ngFor="let l of latest">
                                <ion-thumbnail item-start>
                                        <img [src]="l.image1"/>
                                      </ion-thumbnail>
                                <ion-card color="k2">
                                        <ion-card-header>
                                            {{l.user}} add :
                                        </ion-card-header>
                                        <ion-card-content>
                                            {{l.title}} <br>
                                            {{l.description}} <br>
                                            {{l.city}} <br>
                                            {{l.date}}
                                        </ion-card-content>
                                    </ion-card>     
                        </ion-item>
                    </ion-list>
        </ion-slide>
        <ion-slide>
            <ion-list>
                <ion-item *ngFor="let j of jobs">
                        <ion-card color="k2">
                                <ion-card-header>
                                    {{j.cat}} in {{j.country}} with {{j.salary}} salary
                                </ion-card-header>
                                <ion-card-content>
                                    {{j.job}} <br>
                                    {{j.email}} <br>
                                    {{j.phone}} <br>
                                    {{j.date}}
                                </ion-card-content>
                            </ion-card>     
                </ion-item>
            </ion-list>
        </ion-slide>
        <ion-slide>
            <ion-list>
                <ion-item *ngFor="let n of news">
                    <ion-card color="k2">
                        <ion-card-header>
                            {{n.cat}} new from {{n.country}}
                        </ion-card-header>
                        <ion-card-content>
                            {{n.new}} <br>
                            {{n.date}}
                        </ion-card-content>
                    </ion-card>     
                </ion-item>
            </ion-list>
        </ion-slide>
    </ion-slides>


</ion-content>

这是我的CSS代码：

page-test {
    .SwipedTabs-indicatorSegment
    {
        -webkit-transition: 0.3s all;
        -moz-transition:  0.3s all;
        -o-transition:  0.3s all;
        transition:  0.3s all;
        transform-origin: top 0 left 0;
        height: 1px;
        position: relative;
        top: -2px;
        background-color: black !important;
    }
    .SwipedTabs-tabs ion-segment-button
    {
        border:none !important;
        color:gray!important;
        background-color:white!important;
    }
     .SwipedTabs-tabs ion-segment-button.SwipedTabs-activeTab
    {
        color:black !important;
    }
    .SwipedTabs-tabs
    {
        border-bottom: solid 1px #e6e6e6  !important;
    }
}

如何让标签的内容从页面开头不在中心？ 我怎么解决这个问题？相关代码在哪里？