web-dev-qa-db-fra.com

Comment puis-je aligner le bouton au centre ou à droite en utilisant le framework IONIC?

enter image description here

Je veux le bouton de connexion et d’enregistrement dans right et le bouton de recherche dans Centre.

Et aussi comment puis-je aligner la zone de texte dans une position appropriée.

Voici mon code html:

<body ng-app="starter">

    <ion-pane  style = "background-color:#4992E2;">
      <ion-header-bar class="bar bar-subheader" style = " margin-top: -35px; background-color:#F9F9F9;">
        <h1 class="title" style = "color:black;">NetHealth Appointment Booking</h1>
      </ion-header-bar>
      <ion-content >
          <div class = "row center">
               <div class="col">
                    <button class="button button-small  button-light" >
                      Login!
                    </button>
                     <button class="button button-small  button-light">
                      Register Here!
                    </button>
                </div>
          </div>
          <div class="item-input-inset">
            <h4>Date</h4> 

          <label class="item-input-wrapper">
                <input type="text" placeholder="Text Area">
          </label>
        </div>
        <div class="item-input-inset">
            <h4>Suburb</h4>

          <label class="item-input-wrapper">
                <input type="text" placeholder="Text Area">
          </label>
        </div>
        <div class="item-input-inset">
            <h4>Clinic</h4>
          <label class="item-input-wrapper">
                <input type="text" placeholder="Text Area">
          </label>
        </div>
        <button class=" center button button-small  button-light">
          Search
        </button>

        </ion-content>
    </ion-pane>
  </body>

Je sais dans bootstrap, mais je suis nouveau dans ionic, dites-moi s'il vous plaît comment puis-je faire cela.

cssionic-framework
37
Preety Sapra

Css va fonctionner de la même manière, je suppose.

Vous pouvez centrer le contenu avec quelque chose comme ceci:

.center{
     text-align:center;
}

Mettre à jour

Pour ajuster la largeur de manière appropriée, modifiez votre DOM comme suit:

<div class="item-input-inset">
    <label class="item-input-wrapper"> Date
        <input type="text" placeholder="Text Area" />
    </label>
</div>
<div class="item-input-inset">
    <label class="item-input-wrapper"> Suburb
        <input type="text" placeholder="Text Area" />
    </label>
</div>

CSS

label {
    display:inline-block;
    border:1px solid red;
    width:100%;
    font-weight:bold;
}

input{
    float:right; /* shift to right for alignment*/
    width:80% /* set a width, you can use max-width to limit this as well*/
}

Démo

mise à jour finale

Si vous ne prévoyez pas de modifier le code HTML existant (un dans votre question à l'origine), le code CSS ci-dessous ferait de moi votre meilleur ami! :)

html, body, .con {
    height:100%;
    margin:0;
    padding:0;
}
.item-input-inset {
    display:inline-block;
    width:100%;
    font-weight:bold;
}
.item-input-inset > h4 {
    float:left;
    margin-top:0;/* important alignment */
    width:15%;
}
.item-input-wrapper {
    display:block;
    float:right;
    width:85%;
}
input {
    width:100%;
}

Démo

30
NoobEditor

Vous devriez placer le bouton dans un div, et dans le div, vous devriez pouvoir utiliser les classes:
text-left, text-center et text-right.

par exemple:

<div class="row">
   <div class="col text-center">
      <button class="button button-small button-light">Search</button>
   </div>
</div>

Et à propos de la position "textarea":

<div class="list">
<label class="item item-input">
    <span class="input-label">Date</span>
    <input type="text" placeholder="Text Area">
</label>

Démo en utilisant votre code:
http://codepen.io/douglask/pen/zxXvYY

90
Douglas K.

Pour utiliser l'alignement central dans le code de l'application ionique, vous pouvez utiliser le code suivant:

<ion-row center>  
 <ion-col text-center>   
  <button ion-button>Search</button>  
 </ion-col> 
</ion-row>

Pour utiliser l'alignement correct dans le code de l'application ionique, vous pouvez utiliser le code suivant:

<ion-row right>  
 <ion-col text-right>   
  <button ion-button>Search</button>  
 </ion-col> 
</ion-row>
14
Alvin Chettiar

Une autre façon ionique. En utilisant cette balise ion-button, et le mot-clé de droite place tous les boutons de ce groupe à droite. J'ai créé des boutons à bascule personnalisés que je voulais sur une ligne, mais le groupe doit être justifié à droite.

<ion-buttons right>
<button ....>1</button>
<button ....>2</button>
<button ....>3</button>
</ion-buttons>

0
Mark

J'ai trouvé la solution la plus simple: enveloppez le bouton avec div et mettez-le comme suit: 

<div text-center align-items-center>
<buttonion-button block class="button-design " text-center>Sign In </button>
</div>
0
Khaled Alhindi

Et si nous voulons aligner une case à cocher à droite, nous pouvons utiliser item-end.

<ion-checkbox checked="true" item-end></ion-checkbox>
0
alchi baucha

En fin de compte, nous essayons d’y arriver.

<div style="display: flex; justify-content: center;">
    <button ion-button>Login</button>
</div>
0
Otpidus