Подтвердить что ты не робот

Как я могу выровнять кнопку в центре или вправо, используя структуру IONIC?

enter image description here

Я хочу кнопку входа и регистрации в вправо и кнопку поиска в Центре, я искал много, но не получил никакого решения.

А также как выровнять текстовую область в правильной позиции.

Вот мой 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>

Я знаю в бутстрапе, но я новичок в ионной, скажите, пожалуйста, как я могу это сделать.

4b9b3361

ОТВЕТЫ

Ответ 1

Css будет работать таким же образом, как я предполагаю.

Вы можете сосредоточить контент таким образом:

.center{
     text-align:center;
}

Обновление

Чтобы настроить ширину соответствующим образом, измените свой DOM, как показано ниже:

<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*/
}

Демо

окончательное обновление

Если вы не планируете изменять существующий HTML (один из ваших вопросов изначально), ниже css сделает меня лучшим другом!:)

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%;
}

Демо

Ответ 2

Вы должны поместить кнопку внутри div, а в div вы должны будете использовать классы: текст-левый, текстовый центр и текст правой.

например:

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

И о позиции "textarea": 

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

Демо с использованием вашего кода:
http://codepen.io/douglask/pen/zxXvYY

Ответ 3

Чтобы использовать выравнивание по центру в самом коде кода приложения, вы можете использовать следующий код:

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

Чтобы использовать правильное выравнивание в самом ионном коде приложения, вы можете использовать следующий код:

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

Ответ 4

И если мы хотим выровнять флажок справа, мы можем использовать end-end.

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

Ответ 5

Другой ионический путь. Используя этот тег иконок для кнопок и правильное ключевое слово помещает все кнопки в этой группе вправо. Я сделал некоторые пользовательские кнопки переключения, которые я хотел на одной строке, но группа была правильно оправдана.

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

Ответ 6

Тег

center выравнивает кнопки внутри него, как ожидалось:  

<ion-footer>
    <ion-toolbar>
        <center>
            <button royal>
                Contacts
                <ion-icon name="contact"></ion-icon>
            </button>
            <button secondary>
                Receive
                <ion-icon name="arrow-round-back"></ion-icon>
            </button>
            <button danger>
                Wallet
                <ion-icon name="home"></ion-icon>
            </button>
            <button secondary>
                Send
                <ion-icon name="send"></ion-icon>
            </button>
            <button danger>
                Transactions
                <ion-icon name="archive"></ion-icon>
            </button>
            <button danger>
                About
                <ion-icon name="information-circle"></ion-icon>
            </button>
        </center>
    </ion-toolbar>
</ion-footer>