How to make content center in ion-row

Ionic Framework Ionic Angular
1

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

2

which version of ionic you used?

3

here is your html code

<div class="full-screen" >
        <div style="height: 10%;width: 100%;">
            <ion-row class="headrow">
                <ion-col text-left>
                  <img src="../../assets/imgs/logo.png" height="40px" style="vertical-align: -webkit-baseline-middle;float: left;">
                  <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%;width: 100%;">
          <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%;width: 100%;">
            <ion-row >
            <ion-col text-right>
                www.xyz.com
            </ion-col>
            </ion-row>
          </div>

</div>

and your css

.full-screen {
        display: flex;
        width: 100%;
        height: 100%;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
    }
    
    .headrow{
        height: 100%;
        padding-left: 20px;
        //padding-right: 55px;
        background: #2C405A;
        color: white;
    }
    .centerrow{
        height: 100%;
        align-content: center;
    }

try this i hope its work for you

4

Mr. Saad-Ansari,

iam using ionic4

Thanks for the reply. let me try this and tell u.

5

Dear @rahimhaji
if your problem not solved try this example

<ion-content class="app-login">

  <div class="middle_conn">

    <div>
        <img class="center_img" src="https://pngimage.net/wp-content/uploads/2018/05/dummy-logo-png-8.png">
        <h1 class="heading_ls">Your Review is Your Power</h1>
        <ion-input class="form-input" placeholder="Enter Username or Email "></ion-input>
        <ion-input class="form-input" type="password" placeholder="Enter Your Password "></ion-input>

        <ion-button class="form-button">Login</ion-button>
    </div>

  </div>

</ion-content>

.app-login{
    .middle_conn{
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
        flex-wrap: wrap;
        div{
            width: 90%;
            padding: 20px;
        }
    }
    .center_img{
        width: 153px;
        display: block;
        margin: 0 auto;
    }

    .heading_ls{
        font-size: 16px;
        color: brown;
        font-weight: bold;
        text-align: center;
    }

    .form-input{
        --background: #f3f3f3;
        border-radius: 20px;
        padding: 2px 10px !important;
        margin-bottom: 10px;
        border: 1px solid #efe8e8;
    }
    .form-button{
        --background: brown;
        --color: #fff;
        margin-bottom: 10px;
        width: 100px;
        --border-radius: 20px;
        text-transform: capitalize;
        display: block;
        margin: 0 auto;
        padding: 2px 10px !important;
    }

    


    
}
6

Dear Mr.Saad-ansari,

Greetings! thks for the solution, 2nd one is working fine. 1st one is not working… thanks a lot.

Regards,
Syed Abdul Rahim