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.
