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

enter image description here Как выровнять кнопку в центре или вправо с помощью IONIC?

Я хочу логин и кнопку зарегистрировать в правой и кнопку Поиск в Центр, я искал много, но не получил никакого решения.

А также как выровнять область текста в правильном положении.

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

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

источник

2014-09-16 Preety Sapra

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

Вы можете центрировать содержимое с чем-то вроде этого:

.center{ 
    text-align:center; 
}

Update

Для регулировки ширины в надлежащем порядке, изменять свой 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*/ 
}

Demo

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

Если вы не планируете изменить существующий 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%; 
}

Demo

источник

2014-09-16 05:24:26 NoobEditor

'текст align' выравнивает управление также? OP хочет выровнять кнопку на странице. – asgs

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

@PreetySapra: вы использовали 'label' неверно, пожалуйста, проверьте обновление! – NoobEditor

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

, например:

<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>

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

источник

2015-03-31 19:27:45

идеальное решение. – 2016-04-08 18:36:32

Этот ответ лучше, чем принятый, так как он использует классы Ionic вместо дополнительного ванильного CSS (что является полностью приемлемым решением, но OP попросил Ionic! :)). – rinogo

Правильный синтаксис для RC3 должен быть: ' <ион-цв текст-центр> ' –

-3

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>

источник

2016-08-21 15:12:45 Kwadwo

-1, потому что OP попросил Ионные Framework, которая использует HTML5 и ''

не поддерживается HTML5: http://www.w3schools.com/tags/tag_center.asp – Seika85

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

<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>

источник

2017-08-15 15:00:42

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

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

источник

2017-11-11 23:40:30

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

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

источник

2017-12-13 03:25:43 Mark

Я нашел esiest soltuion обмотать кнопку с ДИВ и поместить текст-центр выравнивает-всевозможный-центр в этом так:

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

источник

2018-02-03 17:46:58

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

ответ

Смежные вопросы