テキストアライメントデザインとCSSのボタンのアイコン

Question

私は、これらのボタンを設計していますが、注文していないとイメージを添付しています。私が欲しいものまあ

（あなたはすべてのものを注文された画像に表示される）、このようなものです：

page-home { 
    p { 
     text-align: center; 
     font-size: 15px; 
     font-weight: bold; 
     color: black; 
    } 
    .body { 
     background-color: #FFEB3B; 
    } 
    .botones { 
     vertical-align: text-bottom; 
     border: none; 
     color: white; 
     text-align: left; 
     text-decoration: none; 
     display: inline-block; 
     font-size: 17px; 
    } 
} 

IONIC

内のコードHTML

<ion-content padding class="body" align="center"> 
    <img src="../../assets/logito.png" class="imagen"> 
    <br> 
    <br> 
    <button ion-button item-end round full icon-start class="botones"> 
     <ion-icon name='logo-facebook'></ion-icon> 
     Registro via Facebook 
     </button> 
    <button ion-button item-end round full icon-start color="secondary" class="botones"> 
     <ion-icon name='person-add'></ion-icon> 
     Servicio Particular 
     </button> 
    <button ion-button item-end round full icon-start color="dark" class="botones"> 
     <ion-icon name='briefcase'></ion-icon> 
     Servicio Corporativo 
     </button> 
    <br> 
    <p>¿Eres nuevo? <a href="http://ionicframework.com/docs/v2">REGISTRATE AHORA</a></p> 
</ion-content> 

Answer 1

これはあなたを始めさせるはずです。

私はコンテナにフレックスボックスを使用し、中央にコンテンツの中央を配置しました。さらに、ボタンはスタイリングを追加しました。

私はイオンに慣れていないので、CSSセレクタを書き直す必要があるかもしれません。

p { 
 
    text-align: center; 
 
    font-size: 15px; 
 
    font-weight: bold; 
 
    color: black; 
 
} 
 

 
.body { 
 
    background-color: #FFEB3B; 
 
} 
 

 
.botones { 
 
    vertical-align: text-bottom; 
 
    border: none; 
 
    color: white; 
 
    text-align: center; 
 
    text-decoration: none; 
 
    display: inline-block; 
 
    font-size: 17px; 
 
    width: 80%; 
 
    height: 60px; 
 
} 
 

 
.botones:not(:last-child) { 
 
    margin-bottom: 1em; 
 
} 
 

 
.botones[color="secondary"] { 
 
    background: blue; 
 
} 
 

 
.botones[color="dark"] { 
 
    background: red; 
 
} 
 

 
ion-content { 
 
    display: flex; 
 
    flex-direction: column; 
 
    align-items: center; 
 
    width: 400px; 
 
}

<ion-content padding class="body" align="center"> 
 
    <img src="http://lorempixel.com/400/200/sports/" class="imagen"> 
 
    <br> 
 
    <br> 
 
    <button ion-button item-end round full icon-start class="botones"> 
 
     <ion-icon name='logo-facebook'></ion-icon> 
 
     Registro via Facebook 
 
     </button> 
 
    <button ion-button item-end round full icon-start color="secondary" class="botones"> 
 
     <ion-icon name='person-add'></ion-icon> 
 
     Servicio Particular 
 
     </button> 
 
    <button ion-button item-end round full icon-start color="dark" class="botones"> 
 
     <ion-icon name='briefcase'></ion-icon> 
 
     Servicio Corporativo 
 
     </button> 
 
    <br> 
 
    <p>¿Eres nuevo? <a href="http://ionicframework.com/docs/v2">REGISTRATE AHORA</a></p> 
 
</ion-content>