CODEWITHSUNDEEP
htmlcss
ecqo
ecqo

Reputation: 83

How can I overlay shapes and align text to its center in CSS?

.grcircle {
  height: 20px;
  width: 20px;
  background-color: green;
  border-radius: 50%;
}

.recircle {
  height: 20px;
  width: 20px;
  background-color: red;
  border-radius: 50%;
}

.orcircle {
  height: 20px;
  width: 20px;
  background-color: orange;
  border-radius: 50%;
}

.yecircle {
  height: 20px;
  width: 20px;
  background-color: yellow;
  border-radius: 50%;
}

.blcircle {
  height: 20px;
  width: 20px;
  background-color: blue;
  border-radius: 50%;
}

.prcircle {
  height: 20px;
  width: 20px;
  background-color: purple;
  border-radius: 50%;
}

.bar {
  height: 40px;
  width: 5px;
  background-color: grey;
  border-radius: 10px;
}

.grcircle,
text {
  display: inline-block;
  vertical-align: center;
}
<div class="grcircle"></div><text>hhi</text>
<div class="bar"></div>
<div class="recircle"></div>
<div class="bar"></div>
<div class="orcircle"></div>
<div class="bar"></div>
<div class="yecircle"></div>
<div class="bar"></div>
<div class="blcircle"></div>
<div class="bar"></div>
<div class="prcircle"></div>
<div class="bar"></div>

Output:

Screenshot

I would like the little bars to be aligned with the centers of the circles, and have them overlayed by the circles, as if a connection.

Also, I would like to have the text on the right in line with the center of the circle.

Upvotes: 2

Views: 103

Answers (3)

Bumhan Yu
Bumhan Yu

Reputation: 2297

While the other answer with transform: translateX(); would be a quick fix, I'd suggest that you rethink the markup as a whole.

Something like below: (see live demo at this CodePen)

<div class="circle green">hhi</div>
<div class="circle red"></div>
<div class="circle orange"></div>
<div class="circle yellow"></div>
<div class="circle blue"></div>
<div class="circle purple"></div>

.circle {
  position: relative;
  margin-bottom: 40px;
  height: 20px;
}

.circle::before {
  content:"";
  display: inline-block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  margin-right: 5px;
}

.circle::after {
  position: absolute;
  content: '';
  left: 8px;
  top: 20px;
  width: 5px;
  background: grey;
  height: 40px;
}
.green::before {
  background-color: green;
}

.red::before {
  background-color: red;
}

.orange::before {
  background-color: orange;
}

.yellow::before {
  background-color: yellow;
}

.blue::before {
  background-color: blue;
}

.purple::before {
  background-color: purple;
}

What I did is: 1. Clean up HTML, so that unnecessary divs and text elements are eliminated 1. Reuse CSS classes, so that repetitive style declarations are consolidated 1. Use ::before and ::after pseudo-elements for circle and bar connector styling.

Upvotes: 1

Cliff Crerar
Cliff Crerar

Reputation: 443

This is a highly responsive approach.

OPTIONAL

I would also propose the refactor of the CSS and also rather use CSS3 attributes for background.

.grid {
	display: grid;
	grid-template-columns: 20px auto;
}

.circle {
	height: 20px;
	width: 20px;
	border-radius: 50%;
}

.gr {
	background: green;
}

.re {
	background: red;
}

.or {
	background: orange;
}

.ye {
	background: yellow;
}

.bl {
	background: blue;
}

.pr {
	background: purple;
}

.bar {
	height: 40px;
	width: 5px;
	background: grey;
	border-radius: 10px;
}
<div class="grid">

	<div class="gr circle"></div><text>hhi</text>

	<div class="bar"></div><text></text>
	<div class="re circle"></div><text></text>
	<div class="bar"></div><text></text>
	<div class="or circle"></div><text></text>
	<div class="bar"></div><text></text>
	<div class="ye circle"></div><text></text>
	<div class="bar"></div><text></text>
	<div class="bl circle"></div><text></text>
	<div class="bar"></div><text></text>
	<div class="pr circle"></div><text></text>
	<div class="bar"></div><text></text>

</div>

Upvotes: 0

AlneX Football
AlneX Football

Reputation: 34

I prefer transform: translateX(); or Y. I don't think my solution is the best, but it works

.bar {
    height: 40px;
    width: 5px;
    transform: translateX(7px);
    background-color: grey;
    border-radius: 10px;
  }

Upvotes: 1

Related Questions