I want the down arrow to be in the bottom centre of the page. I am trying to achieve this through flex layout. but unable to do it so far. Can someone please help me ? Below is my css /html
.flex-description-container {
display: flex;
flex-flow: row wrap;
align-items: center
}
.flex-item-descriptionText {
padding: 10px;
color: white;
font-weight: bold;
font-size: 4em;
text-align: center;
flex: 1;
}
.flex-item-descriptionImage {
padding: 10px;
color: white;
flex: 1;
}
.flex-item-next {
flex: 1 100%;
align-items: center;
align-self: flex-end;
justify-content: center;
}
App.jsx>
<Parallax.Layer
offset={0} speed={0}
onClick={() => this.parallax.scrollTo(1)}>
<div class="flex-description-container ">
<div class="flex-item-descriptionText">Text </div>
<div class="flex-item-descriptionImage">
<img src={url('desk')} style={{ width: '50%' }} />
</div>
<div class="flex-item-next">
<img src={url('down')} style={{ width: '5%' }} />
</div>
</div>
</Parallax.Layer>
PS: I am using this react component
Just add display:flex
to .flex-item-next
.
.flex-item-next {
flex: 1 100%;
display: flex;
align-items: center;
align-self: flex-end;
justify-content: center;
}
See working implementation .
for do that enter this code to .flex-item-next
:
.flex-item-next {
display: flex;
flex: 1 100%;
align-items: center;
align-self: flex-end;
justify-content: center;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.