离子2对齐按钮标签向左

我在离子2创建了一个按钮，如下所示：离子2对齐按钮标签向左

<button secondary block round padding style="text-align : left;"> 
    <ion-icon ios="ios-key" md="md-key"></ion-icon> 
    Login 
    </button>

我想按钮文本对齐到左侧，但它不是到他那里。有没有建立twik可以实现这一目标？

来源

2016-07-27 Prerak Tiwari

当你说对齐时，是指将文本完全对齐按钮边缘左侧的文本，或者只是将ic在文字上的位置在文本的左侧，图标在右侧的中央？ –

@ Will.Harris当我说对齐时，我的意思是将文本完全对齐按钮边缘左侧的文本。 –

此图标应该放在哪里留在中间/推出到右侧/只是文本结束的一侧？ –

离子包裹按钮的内容到一个<span>标签，其具有类.button-inner。因此，HTML标记看起来是这样的，当你检查它

<button secondary block round padding> 
    <span class="button-inner">    
     <ion-icon ios="ios-key" md="md-key" item-right></ion-icon> 
     Login 
    </span>  
    <ion-button-effect></ion-button-effect> 
</button>

的.button-inner类应用Flexbox的属性来定位文本和图标的中央。您可以覆盖justify-content属性并将值从center更改为flex-start，这会告诉内容（文本和图标）从框的开头开始。

例

如果要如果想将它应用到特定的按钮（其中.specific-button被添加作为一个类的按钮部件），以将其应用到所有按钮

.button-inner{ 
    justify-content:flex-start; 
}

.specific-button .button-inner{ 
    justify-content:flex-start; 
}

来源

2016-07-27 15:02:15

正是我在寻找的东西。 –

伟大的答案！ –

因为Ionic使用它的类生成默认的CSS。所以你应该使用SASS来定制CSS。

例如：

<button class="item"> 
    <ion-icon ios="ios-key" md="md-key"></ion-icon> 
    Login 
    </button>

文件styles.scss

.item{ 
    @extend secondary; 
    @extend block; 
    text-align : left; 
}

来源

2016-07-27 02:17:39 johnny

它不适合我。 –

我认为你应该阅读这个主题：http://www.joshmorony.com/a-guide-to-styling-an-ionic-2-application/ – johnny

您可以使用item-left属性button - 标签内。无需class=""或style=""。

<button secondary block round padding item-left> 
    <ion-icon ios="ios-key" md="md-key"></ion-icon> 
    Login 
</button>

更多信息here

来源

2016-07-27 10:33:36 John

我已经尝试过，但它没有奏效。 –

离子2对齐按钮标签向左

回答

相关问题