Dear Friends,
i want to make the content vertical and horizontal content in the below pic:
i want to make those blue buttons center and left and right arrows next to it in vertical & horizontal center all the content.
i used the below code:
.html
<ion-content>
<div class="full-screen" >
<div style="height: 10%;">
<ion-row class="headrow">
<ion-col text-left>
<ion-icon src="../../assets/imgs/left_arrow.svg" style="vertical-align: -webkit-baseline-middle; height: 50px; width: 50px;" (click)="back_clicked()"></ion-icon>
<img src="../../assets/imgs/nav_logo.png" height="40px" style="vertical-align: -webkit-baseline-middle">
<ion-label style="padding:15px; font-size: 40px; color: #ffffff; vertical-align: -webkit-baseline-middle"><span>ProjectName</span> <span style="font-size: 10px;">v1.0.0</span> </ion-label>
</ion-col>
<ion-col text-right>
<ion-icon src="../../assets/imgs/home.svg" style="vertical-align: -webkit-baseline-middle; height: 40px; width: 40px; padding-left: 5px; color: #808c9c" (click)="back_clicked()"></ion-icon>
<img src="../../assets/imgs/prof_pic.png" height="40px" style="padding:2px; vertical-align: -webkit-baseline-middle">
</ion-col>
</ion-row>
</div>
<div class="centerrow">
<ion-icon name="arrow-dropleft" style="height:40px"></ion-icon>
<ion-grid >
<ion-row>
<ion-button class="butStyle"></ion-button>
<ion-button class="butStyle"></ion-button>
<ion-button class="butStyle"></ion-button>
<ion-button class="butStyle"></ion-button>
</ion-row>
<ion-row>
<ion-button class="butStyle"></ion-button>
<ion-button class="butStyle"></ion-button>
<ion-button class="butStyle"></ion-button>
<ion-button class="butStyle"></ion-button>
</ion-row>
<ion-row>
<ion-button class="butStyle"></ion-button>
<ion-button class="butStyle"></ion-button>
<ion-button class="butStyle"></ion-button>
<ion-button class="butStyle"></ion-button>
</ion-row>
</ion-grid>
<ion-icon name="arrow-dropright" style=" font-size: larger; height:40px; color: blue;"></ion-icon>
</div>
</div>
</ion-content>
.scss file is:
.full-screen {
height: 100% !important;
width: 100% !important;
}
.headrow{
height: 100%;
padding-left: 20px;
//padding-right: 55px;
background: #2C405A;
color: white;
}
.centerrow{
text-align: center;
align-content: center;
display: flex;
align-items: center;
justify-content: center;
height: 90%;
flex-wrap: wrap;
div{
width: 60%;
}
}
.butStyle{
background-color: blue;
width: 100px;
height: 100px;
}
How can i make those content vertical and horizontal center with responsive? pls help me friends.
Thanks and Regards,
Syed Abdul Rahim