Ionic 4 center ion grid within ion-content

I simply have an ion-content within that an ion-grid within that an h1.

<ion-content no-padding no-bounce>

    <ion-grid no-padding>

        <h1>ion-grid</h1>

    </ion-grid>

</ion-content>

I have my ion-content set to 100vh, and the ion grid set to 80%; height. How do I vertically center the ion grid within the ion-content? And vertically center the h1 within the ion grid?

I tried setting the ion-content to display flex (which I'm sure it already is) and also align-content center. Same with the ion-grid.

Here is my CSS:

ion-content {

    display: flex;

    height: 100vh;

    width: 100vw;

    align-content: center;



    ion-grid {

        display: flex;

        height: 80%;

        width: 100%;

        background-color: blue;

        align-content: center;

    }

}

Heres the result (the ion-grid is stuck to the top of ion-content rather than vertically centered so align-content: center does not work. Same with ion grid and the h1):

enter image description here

edited Nov 25 '18 at 22:34

asked Nov 25 '18 at 22:25

user10181542

679

add a comment |

I simply have an ion-content within that an ion-grid within that an h1.

<ion-content no-padding no-bounce>

    <ion-grid no-padding>

        <h1>ion-grid</h1>

    </ion-grid>

</ion-content>

I have my ion-content set to 100vh, and the ion grid set to 80%; height. How do I vertically center the ion grid within the ion-content? And vertically center the h1 within the ion grid?

I tried setting the ion-content to display flex (which I'm sure it already is) and also align-content center. Same with the ion-grid.

Here is my CSS:

ion-content {

    display: flex;

    height: 100vh;

    width: 100vw;

    align-content: center;



    ion-grid {

        display: flex;

        height: 80%;

        width: 100%;

        background-color: blue;

        align-content: center;

    }

}

Heres the result (the ion-grid is stuck to the top of ion-content rather than vertically centered so align-content: center does not work. Same with ion grid and the h1):

enter image description here

edited Nov 25 '18 at 22:34

asked Nov 25 '18 at 22:25

user10181542

679

add a comment |

I simply have an ion-content within that an ion-grid within that an h1.

<ion-content no-padding no-bounce>

    <ion-grid no-padding>

        <h1>ion-grid</h1>

    </ion-grid>

</ion-content>

I have my ion-content set to 100vh, and the ion grid set to 80%; height. How do I vertically center the ion grid within the ion-content? And vertically center the h1 within the ion grid?

I tried setting the ion-content to display flex (which I'm sure it already is) and also align-content center. Same with the ion-grid.

Here is my CSS:

ion-content {

    display: flex;

    height: 100vh;

    width: 100vw;

    align-content: center;



    ion-grid {

        display: flex;

        height: 80%;

        width: 100%;

        background-color: blue;

        align-content: center;

    }

}

Heres the result (the ion-grid is stuck to the top of ion-content rather than vertically centered so align-content: center does not work. Same with ion grid and the h1):

enter image description here

edited Nov 25 '18 at 22:34

asked Nov 25 '18 at 22:25

user10181542

679

I simply have an ion-content within that an ion-grid within that an h1.

<ion-content no-padding no-bounce>

    <ion-grid no-padding>

        <h1>ion-grid</h1>

    </ion-grid>

</ion-content>

I have my ion-content set to 100vh, and the ion grid set to 80%; height. How do I vertically center the ion grid within the ion-content? And vertically center the h1 within the ion grid?

I tried setting the ion-content to display flex (which I'm sure it already is) and also align-content center. Same with the ion-grid.

Here is my CSS:

ion-content {

    display: flex;

    height: 100vh;

    width: 100vw;

    align-content: center;



    ion-grid {

        display: flex;

        height: 80%;

        width: 100%;

        background-color: blue;

        align-content: center;

    }

}

Heres the result (the ion-grid is stuck to the top of ion-content rather than vertically centered so align-content: center does not work. Same with ion grid and the h1):

enter image description here

flexbox ionic4

edited Nov 25 '18 at 22:34

asked Nov 25 '18 at 22:25

user10181542

679

edited Nov 25 '18 at 22:34

asked Nov 25 '18 at 22:25

user10181542

679

edited Nov 25 '18 at 22:34

asked Nov 25 '18 at 22:25

user10181542

679

asked Nov 25 '18 at 22:25

user10181542

679

asked Nov 25 '18 at 22:25

user10181542

679

add a comment |

2 Answers
2

active

oldest

votes

Where is your row and column tags.  Like this!



<ion-grid>

  <ion-row>

    <ion-col>

      ion-col

    </ion-col>

    <ion-col>

      ion-col

    </ion-col>

    <ion-col>

      ion-col

    </ion-col>

    <ion-col>

      ion-col

    </ion-col>

  </ion-row>



  <ion-row>

    <ion-col size="6">

      ion-col [size="6"]

    </ion-col>

    <ion-col>

      ion-col

    </ion-col>

    <ion-col>

      ion-col

    </ion-col>

  </ion-row>

</ion-grid>

answered Nov 26 '18 at 4:17

Jacques Schalkwyk

2116

add a comment |

Add this code to ion-grid this should work for you;

justify-content: center;

align-items: center;

answered Nov 26 '18 at 8:08

cipli onat

1618

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53472631%2fionic-4-center-ion-grid-within-ion-content%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

2 Answers
2

active

oldest

votes

2 Answers
2

active

oldest

votes

Where is your row and column tags.  Like this!



<ion-grid>

  <ion-row>

    <ion-col>

      ion-col

    </ion-col>

    <ion-col>

      ion-col

    </ion-col>

    <ion-col>

      ion-col

    </ion-col>

    <ion-col>

      ion-col

    </ion-col>

  </ion-row>



  <ion-row>

    <ion-col size="6">

      ion-col [size="6"]

    </ion-col>

    <ion-col>

      ion-col

    </ion-col>

    <ion-col>

      ion-col

    </ion-col>

  </ion-row>

</ion-grid>

answered Nov 26 '18 at 4:17

Jacques Schalkwyk

2116

add a comment |

Where is your row and column tags.  Like this!



<ion-grid>

  <ion-row>

    <ion-col>

      ion-col

    </ion-col>

    <ion-col>

      ion-col

    </ion-col>

    <ion-col>

      ion-col

    </ion-col>

    <ion-col>

      ion-col

    </ion-col>

  </ion-row>



  <ion-row>

    <ion-col size="6">

      ion-col [size="6"]

    </ion-col>

    <ion-col>

      ion-col

    </ion-col>

    <ion-col>

      ion-col

    </ion-col>

  </ion-row>

</ion-grid>

answered Nov 26 '18 at 4:17

Jacques Schalkwyk

2116

add a comment |

Where is your row and column tags.  Like this!



<ion-grid>

  <ion-row>

    <ion-col>

      ion-col

    </ion-col>

    <ion-col>

      ion-col

    </ion-col>

    <ion-col>

      ion-col

    </ion-col>

    <ion-col>

      ion-col

    </ion-col>

  </ion-row>



  <ion-row>

    <ion-col size="6">

      ion-col [size="6"]

    </ion-col>

    <ion-col>

      ion-col

    </ion-col>

    <ion-col>

      ion-col

    </ion-col>

  </ion-row>

</ion-grid>

answered Nov 26 '18 at 4:17

Jacques Schalkwyk

2116

Where is your row and column tags.  Like this!



<ion-grid>

  <ion-row>

    <ion-col>

      ion-col

    </ion-col>

    <ion-col>

      ion-col

    </ion-col>

    <ion-col>

      ion-col

    </ion-col>

    <ion-col>

      ion-col

    </ion-col>

  </ion-row>



  <ion-row>

    <ion-col size="6">

      ion-col [size="6"]

    </ion-col>

    <ion-col>

      ion-col

    </ion-col>

    <ion-col>

      ion-col

    </ion-col>

  </ion-row>

</ion-grid>

answered Nov 26 '18 at 4:17

Jacques Schalkwyk

2116

answered Nov 26 '18 at 4:17

Jacques Schalkwyk

2116

answered Nov 26 '18 at 4:17

Jacques Schalkwyk

2116

answered Nov 26 '18 at 4:17

Jacques Schalkwyk

2116

add a comment |

Add this code to ion-grid this should work for you;

justify-content: center;

align-items: center;

answered Nov 26 '18 at 8:08

cipli onat

1618

add a comment |

Add this code to ion-grid this should work for you;

justify-content: center;

align-items: center;

answered Nov 26 '18 at 8:08

cipli onat

1618

add a comment |

Add this code to ion-grid this should work for you;

justify-content: center;

align-items: center;

answered Nov 26 '18 at 8:08

cipli onat

1618

Add this code to ion-grid this should work for you;

justify-content: center;

align-items: center;

answered Nov 26 '18 at 8:08

cipli onat

1618

answered Nov 26 '18 at 8:08

cipli onat

1618

answered Nov 26 '18 at 8:08

cipli onat

1618

answered Nov 26 '18 at 8:08

cipli onat

1618

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Tukukkk