How can I align button in Center or right using IONIC framework

Question

I want the login and register button in right and Search button in Center  I searched alot but didn t get any solution   And also how can I align text area in a proper position   Here is my html code    lt body ng-app  starter  gt        lt ion-pane  style    background-color  4992E2   gt         lt ion-header-bar class  bar bar-subheader  style     margin-top  -35px  background-color  F9F9F9   gt           lt h1 class  title  style    color black   gt NetHealth Appointment Booking lt  h1 gt         lt  ion-header-bar gt         lt ion-content  gt             lt div class    row center  gt                  lt div class  col  gt                       lt button class  button button-small  button-light   gt                        Login                       lt  button gt                        lt button class  button button-small  button-light  gt                        Register Here                       lt  button gt                   lt  div gt             lt  div gt             lt div class  item-input-inset  gt               lt h4 gt Date lt  h4 gt               lt label class  item-input-wrapper  gt                   lt input type  text  placeholder  Text Area  gt             lt  label gt           lt  div gt           lt div class  item-input-inset  gt               lt h4 gt Suburb lt  h4 gt              lt label class  item-input-wrapper  gt                   lt input type  text  placeholder  Text Area  gt             lt  label gt           lt  div gt           lt div class  item-input-inset  gt               lt h4 gt Clinic lt  h4 gt             lt label class  item-input-wrapper  gt                   lt input type  text  placeholder  Text Area  gt             lt  label gt           lt  div gt           lt button class   center button button-small  button-light  gt            Search          lt  button gt            lt  ion-content gt       lt  ion-pane gt     lt  body gt    I know in the bootstrap  but I am new to ionic  please tell me how can I do this

User · Answer

You should put the button inside a div  and in the div you should be able to use the classes  text-left  text-center and text-right   for example    lt div class  row  gt      lt div class  col text-center  gt         lt button class  button button-small button-light  gt Search lt  button gt      lt  div gt   lt  div gt    And about the  textarea  position    lt div class  list  gt   lt label class  item item-input  gt       lt span class  input-label  gt Date lt  span gt       lt input type  text  placeholder  Text Area  gt   lt  label gt      Demo using your code  http   codepen io douglask pen zxXvYY

User · Answer

Css is going to work in same manner i assume   You can center the content with something like this     center       text-align center      Update  To adjust the width in proper manner  modify your DOM as below     lt div class  item-input-inset  gt       lt label class  item-input-wrapper  gt  Date          lt input type  text  placeholder  Text Area    gt       lt  label gt   lt  div gt   lt div class  item-input-inset  gt       lt label class  item-input-wrapper  gt  Suburb          lt input type  text  placeholder  Text Area    gt       lt  label gt   lt  div gt    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  final update  If you don t plan to modify existing HTML  one in your question originally   below css would make me your best friend       html  body   con       height 100       margin 0      padding 0     item-input-inset       display inline-block      width 100       font-weight bold     item-input-inset  gt  h4       float left      margin-top 0    important alignment        width 15      item-input-wrapper       display block      float right      width 85     input       width 100       Demo

User · Answer

And if we want to align a checkbox to the right  we can use item-end    lt ion-checkbox checked  true  item-end gt  lt  ion-checkbox gt

User · Answer

To use center alignment in ionic app code itself  you can use the following code    lt ion-row center gt      lt ion-col text-center gt        lt button ion-button gt Search lt  button gt      lt  ion-col gt    lt  ion-row gt    To use right alignment in ionic app code itself  you can use the following code    lt ion-row right gt      lt ion-col text-right gt        lt button ion-button gt Search lt  button gt      lt  ion-col gt    lt  ion-row gt

User · Answer

Another Ionic way   Using this ion-buttons tag  and the right keyword puts all the buttons in this group to the right   I made some custom toggle buttons that i wanted on one line  but the group to be right justified    x000D   x000D   lt ion-buttons right gt  x000D   lt button      gt 1 lt  button gt  x000D   lt button      gt 2 lt  button gt  x000D   lt button      gt 3 lt  button gt  x000D   lt  ion-buttons gt  x000D   x000D   x000D

User · Answer

I Found the esiest soltuion just wrap the button with div and put  text-center align-items-center in it like this       lt div text-center align-items-center gt   lt buttonion-button block class  button-design   text-center gt Sign In  lt  button gt   lt  div gt

User · Answer

center tag aligns the buttons within it as expected   nbsp    lt ion-footer gt       lt ion-toolbar gt           lt center gt               lt button royal gt                  Contacts                  lt ion-icon name  contact  gt  lt  ion-icon gt               lt  button gt               lt button secondary gt                  Receive                  lt ion-icon name  arrow-round-back  gt  lt  ion-icon gt               lt  button gt               lt button danger gt                  Wallet                  lt ion-icon name  home  gt  lt  ion-icon gt               lt  button gt               lt button secondary gt                  Send                  lt ion-icon name  send  gt  lt  ion-icon gt               lt  button gt               lt button danger gt                  Transactions                  lt ion-icon name  archive  gt  lt  ion-icon gt               lt  button gt               lt button danger gt                  About                  lt ion-icon name  information-circle  gt  lt  ion-icon gt               lt  button gt           lt  center gt       lt  ion-toolbar gt   lt  ion-footer gt

User · Answer

Ultimately  we are trying to get to this    lt div style  display  flex  justify-content  center   gt       lt button ion-button gt Login lt  button gt   lt  div gt

[css] How can I align button in Center or right using IONIC framework?

Examples related to css

Examples related to ionic-framework