I am currently facing an issue with my parent container div and its child elements. Even though one child element is being vertically centered, the other two child elements remain at the top of the page. I have been trying to troubleshoot this problem but haven't been able to pinpoint the mistake in my code.
html:
<div class="Container">
<div class="headerWrapper">
<div>
<span>Information & Advice</span>
</div>
<div>
<span>From the daylight experts</span>
</div>
</div>
<div class="wrapper">
<app-carousel></app-carousel>
<app-guides></app-guides>
</div>
<div class="instagramWrapper">
<app-instagram></app-instagram>
</div>
css:
.Container {
padding: 0;
height: 100%;
margin: 0;
display: flex;
align-self: center;
align-items: center;
justify-content: center;
flex-direction: row;
width: 100%;
}
.wrapper {
width: 780px;
/* inherit parent width */
}
.instagramWrapper {
width: 500px;
padding-left: 10px;
margin-left: 2px;
/* inherit parent width */
}
According to my knowledge, 'align-items' should align items in the cross axis of the current line of the flex container. However, this doesn't seem to be working as expected in my case.
https://i.sstatic.net/qOyxD.jpg
The updated result can be seen above.