離子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對齊按鈕標籤向左

回答

相關問題