Breaking down the complex issue into a simple statement, I am dealing with a blue circle inside a box with a red border.
How can I ensure that the circle remains centered while overlapping the top horizontal line of the box's border?
I tried different approaches to achieve the desired outcome: https://jsfiddle.net/pgcft3z7/1/
HTML:
<div class="container">
<div class="circle">
Circle Text Here
</div>
</div>
CSS:
.circle {
display: flex;
align-items: center;
text-align: center;
justify-content: center;
color: white;
border-radius: 50%;
width: 130px;
height: 130px;
margin: 0 auto;
background: blue;
position:absolute;
top: -5px;
left: 200px;
}
.container {
margin-top: 40px;
border: solid 1px;
border-color: red;
}
This solution requires manually setting the left and top values, which may affect the responsiveness and alignment over time.
Here is an example of the current appearance: https://jsfiddle.net/pgcft3z7/