How can I align button in Center or right using IONIC framework?
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 :
<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
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 > h4 {
float:left;
margin-top:0;/* important alignment */
width:15%;
}
.item-input-wrapper {
display:block;
float:right;
width:85%;
}
input {
width:100%;
}
Demo
How to center an ion-button in ionic 4?
You should use the GRID system from Ionic to structure and align content in your application. Plus take a look at CSS Utilities to use proper build-in CSS styles.
https://ionicframework.com/docs/api/grid
https://ionicframework.com/docs/layout/css-utilities
<ion-grid>
<ion-row class="ion-align-items-center">
<ion-col size="12" class="ion-text-center">
<ion-item lines="none" id="projectTitle" *ngIf="nextOptions == 'previous'">
<ion-input name="title" [(ngModel)]="title" class="text-input" placeholder="Project Title"></ion-input>
</ion-item>
</ion-col>
<ion-col size="12" class="ion-text-center">
<ion-button (click)="nextOption()" fill="clear">
<span *ngIf="!title">maybe later</span>
<span *ngIf="title">next</span>
</ion-button>
</ion-col>
</ion-row>
</ion-grid>
Align buttons in ionic
You can achieve this using Grid, ionic provide it grid link
It is based on a 12 column layout with different breakpoints based on the screen size.
By default, columns will take up equal width inside of a row for all devices and screen sizes.
<ion-grid>
<ion-row>
<ion-col>
1 of 2
</ion-col>
<ion-col>
2 of 2
</ion-col>
</ion-row>
<ion-row>
<ion-col>
1 of 3
</ion-col>
<ion-col>
2 of 3
</ion-col>
<ion-col>
3 of 3
</ion-col>
</ion-row>
</ion-grid>
Set the width of one column and the others will automatically resize around it. This can be done using our predefined grid attributes. In the example below, the other columns will resize no matter the width of the center column.
<ion-grid>
<ion-row>
<ion-col>
1 of 3
</ion-col>
<ion-col col-8>
2 of 3 (wider)
</ion-col>
<ion-col>
3 of 3
</ion-col>
</ion-row>
<ion-row>
<ion-col>
1 of 3
</ion-col>
<ion-col col-6>
2 of 3 (wider)
</ion-col>
<ion-col>
3 of 3
</ion-col>
</ion-row>
</ion-grid>
So you also can 3 buttons in left,center and right. i.e. First button in left, second in center and third one in right using grid.
<ion-grid>
<ion-row>
<ion-col col-4>
<button ion-button>
First
</button>
</ion-col>
<ion-col col-4>
<button ion-button>
Second
</button>
</ion-col>
<ion-col col-4>
<button ion-button>
Third
</button>
</ion-col>
</ion-row>
</ion-grid>
Ionic Framework Center button within ionic item
Ionic provides a set of utility attributes that can be used on any element in order to modify the text or adjust the padding or margin.
Read - Ionic CSS Utilities
you can use text-center
The inline contents are centered within the line box.
Try like this'
<ion-list >
<ion-item text-center ><button ion-button (click)="gotoPage1(); ">Go page 1</button></ion-item>
<ion-item text-center><button ion-button (click)="gotoPage2()">Go page 2</button></ion-item>
<ion-item text-center><button ion-button (click)="gotoPage3()">Go page 3</button></ion-item>
</ion-list>
stackblitz - code
right alignment for a button in ion-col
In your case you can add the attribute float-right
like so:
<button ion-button float-right>My button</button>
float-{modifier}
The documentation says you can add the attribute float-{modifier}
to position an element inside its container.
{modifier}
can be any of the following:right
: The element will float on the right side of its container.left
: The element will float on the left side of its container.start
: The same as float-left
if direction is left-to-right and float-right if direction is right-to-left.end
: The same as float-right if direction is left-to-right and float-left if direction is right-to-left.
Example:
<div>
<button ion-button float-right>My button</button>
</div>
item-{modifier}
To position an element inside an ion-item
the documentation says you can use item-{modifier}
.
Where {modifier}
can be any of the following:start
: Placed to the left of all other elements, outside of the inner item.end
: Placed to the right of all other elements, inside of the inner item, outside of the input wrapper.content
: Placed to the right of any ion-label, inside of the input wrapper.
Example:
<ion-item>
<button ion-button item-end>My button</button>
</ion-item>
Deprecation
According to the documentation these names are deprecated:
item-right
& item-left
The new names are :
item-start
&item-end
padding-start
&padding-end
margin-start
&margin-end
text-start
&text-end
start
andend
for FABs
Related Topics
Split Div into 2 Columns Using CSS
How to Make Bootstrap 4 Columns Have a Height of 100%
Css Floating Divs At Variable Heights
Vertical Align Center in Bootstrap 4
Complex CSS Selector For Parent of Active Child
Css3 Background Image Transition
Css to Select/Style First Word
Twitter Bootstrap 3: How to Use Media Queries
Bootstrap 3 Fluid Grid Layout Issues
Possible to Use Border-Radius Together With a Border-Image Which Has a Gradient
How Would You Make Two <Div>S Overlap
Safari: Media Query Not Firing At the Expected Width
How to Make a Child Div'S Width Wider Than the Parent Div Using Css
How to Center an Absolutely Positioned Element in a Div
How to Apply Multiple Transforms in Css