How to make content center in ion-row

@rahimhaji wrote:

iam creating a page with three div’s and center div i have 1 row with content. i want to make that center row content in center of the screen with responsive. my code is as below:
HTML

<ion-content>
    <div class="full-screen" >
        <div style="height: 10%;">
            <ion-row class="headrow">
                <ion-col text-left>
                  <img src="../../assets/imgs/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>
                  <img src="../../assets/imgs/avsoft_logo.png" height="40px" style="padding:2px; vertical-align: -webkit-baseline-middle">
                </ion-col>
              </ion-row>
          
        </div>
        <div style="height: 80%;">
          <ion-row style="border:2px solid #1df84d" class="centerrow">
            <ion-col text-right><img src="../../assets/imgs/tank_button.png" (click)="gotohome()"></ion-col>
            <ion-col text-center><img src="../../assets/imgs/ship_button.png"></ion-col>
            <ion-col text-left><img src="../../assets/imgs/flight_button.png"></ion-col>
          </ion-row>

        </div>
        <div style="height: 10%;">
            <ion-row >
            <ion-col text-right>
                www.xyz.com
            </ion-col>
            </ion-row>
          </div>
</div>

</ion-content>

.scss file as below:

.full-screen {
    height: 100% !important;
    width: 100% !important;
}

.headrow{
    height: 100%;
    padding-left: 20px;
    //padding-right: 55px;
    background: #2C405A;
    color: white;
}
.centerrow{
    height: 100%;
    align-content: center;
}

in browser i can see center. but in app (after compile and install in ipad) its not coming in center of the div. even i used text-center same as colum in ion-row its not working .

pls help me to find a solution.

Thanks and Regards,
Syed Abdul Rahim

Posts: 1

Participants: 1

Read full topic