How to make the text to align properly in map pin marker css?

user_9702455 0
Viewed 201

here I did a custom map marker pin with text inside of it.

I got a working example from this website link

I slightly tweak the code. But not able to align the text correctly.

Code:

body {
  background: #e6e6e6;
}

.pin {
  width: 30px;
  height: 30px;
  border-radius: 50% 50% 50% 0;
  background: #00cae9;
  transform: rotate(-45deg);
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
}
<div class='pin'>1</div>

Result:

enter image description here

Is there any way I can align the text correctly. Help me with your suggestions and feedback

reactjs css html
1 Answers

The text content is rotating with the parent container from transform: rotate(-45deg). If you wrap the pin number in a span or another element, then just offset the rotation to align the pin number appropriately.

body {
  background: #e6e6e6;
}

.pin {
  width: 30px;
  height: 30px;
  border-radius: 50% 50% 50% 0;
  background: #00cae9;
  transform: rotate(-45deg);
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
}

.pin span {
  transform: rotate(45deg);
}
<div class='pin'><span>1</span></div>

user_113895810
Related