Register now or log in to join your professional community.
Below is the link of what I have tried so far.
https://jsfiddle.net/m_zaid/hnfrLaf6/
Now the requirement is, I need to show all3 div should be center align also.
Any help in this regards will be highly appreciated.
Thanks in advance.
Regard,
Muhammad Zaid.
<div class="wrapper">
<div class="box one"></div>
<div class="box two"></div>
<div class="box three"></div>
</div>
.wrapper {
display:flex;
font-size: 0;
justify-content:center;
}
.box {
width: 20%;
background-color: #f00;
min-height: 200px;
}
.two {
background-color: #ff0;
}
.three {
background-color: #fff;
}
The below is the easy fix, but not a permanent solution.
https://jsfiddle.net/12yn26x3/
HTML
div class="wrapper" align="center">
<div class="box one"></div>
<div class="box two"></div>
<div class="box three"></div>
</div>
CSS
.box {width: 20%; background-color: #f00; min-height: 200px;display:inline-block;}
.two {background-color: #ff0;display:inline-block;}
.three {background-color: #fff;}
Dear Ashraf,
Your solution leads me to make it work for me.
https://jsfiddle.net/m_zaid/hnfrLaf6/1/
Also, I have notice that while I am using display: inline-block, it's giving gaps between boxes, so I have given font-size:0 on the wrapper. This will remove gaps between boxes.
Thanks for the help.
Regards,
Muhammad Zaid.
Do you need help in adding the right keywords to your CV? Let our CV writing experts help you.