Issue
How to have a circle in center of page using flex box and that has to be responsive ? I tried below but it did not work out.
HTML
<div class="circle">Hello I am A Circle </div>
CSS
.circle {
width:50px;
height:50px;
border-radius:100%;
font-size:50px;
color:#fff;
line-height:500px;
text-align:center;
background:#000;
flex:1;
justify-content:center;
align-items:center;
}
Solution
Give your container a specific height
and you'll see that your code is working as intended. The problem is that your container is only as big as the circle, so you won't notice until you make the container bigger. Try making it something 500px
tall.
Answered By - Dan Mullin
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.