I want my mobile app (using Ionic Framework) to have 3 sections: a header, a middle and the bottom. The middle and bottom should fill up all the remaining space: middle 80% and bottom 20%.
In the middle section, there should be an 80x80 image centered both horizontally and vertically. This should also be the case for the bottom section.
I've tried many different approaches, but none of them seem to do the job. Some do work in plain html/css, but when I put it in
For the middle section, I'm now using something like:
html, body {height:100%;}
.flex-container {
display: -webkit-flexbox;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
text-align: center;
height: 100%;
background: yellow;
}
<ion-view view-title="Landing">
<div class="flex-container">
<div ng-controller="SomeCtrl">
<img src="../img/myimg.png" /><br /><br />
</div>
</div>The image is positioned vertically, but not horizontally. As I said, this does work in plain html/css, but not when I include it in my Ionic project.
Anyone who can help me with this? Searched and demo-ed for hours now but can't seem to wrap my head around it.