1

I'm trying to maintain a 2:1 width to height ratio, while trying to maintain the circle elment perfectly aligned vertically and horizontally. By increasing the width, the circled element is not perfectly aligned. Rather than playing with %, is there another way of doing it (and maintaining the 2:1 ratio)?

.con {
  display: flex;
  border: 2px solid black;
  width: 100%;
  height:1px;
  position: relative;
  padding-top: 50%;
}

.a {
  width: 50%;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: cyan;
}

.circle {
  z-index: 1;
  background: green;
  border-radius: 50%;
  height: 50px;
  width: 50px;
  margin: auto;
  position: absolute;
  top: 45%;
  bottom: 45%;
  left: 45%;
  right: 45%;
}

.b {
  width: 50%;
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  background: yellow;
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>

  <div class="con">
    <div class="a">A</div>
    <div class="circle"></div>
    <div class="b">B</div>
    
  </div>
</body>
</html>

https://jsfiddle.net/orangegoat/fhza94j0/1/

KT-mongo
  • 2,044
  • 4
  • 18
  • 28
  • You cn centered instead of using % just either use 0 for each positioning top: 0; bottom: 0; left: 0; right: 0; or use top: 50%; left:50%; but add after that transform: translate(-50%, -50%); this will center it as it should either ways should work – Somelight Mar 23 '21 at 19:19
  • 1
    Oh man, those 0s in every direction worked like a charm :) wish you could answer to upvote it. All related questions have nothing to do with this one (...and caused this one to auto-close) – KT-mongo Mar 23 '21 at 19:51
  • it is fine ill upvote your comment lol – Somelight Mar 23 '21 at 20:10

0 Answers0