0

I have a grid with numbers. I want to highlight the chosen number by drawing a circle around it but the number isn't exactly in the middle of the circle. I have a feeling that the grid is somehow pushing the circle. I tried all the answers from similar questions but nothing worked. I managed to put it into jsfiddle:

<span class="number-grid">
  <span class="number">1.</span>
  <span class="number">2.</span>
  <span class="number-highlighted">3.</span>
  <span class="number">4.</span>
  <span class="number">5.</span>
  <span class="number">6.</span>
  <span class="number">7.</span>
  <span class="number">8.</span>
  <span class="number">9.</span>
  <span class="number">10.</span>
</span>


.number-grid {
  display: grid;
  grid-template-columns: 20% 20% 20% 20% 20%;
  grid-row-gap: 16px;
  justify-items: center;
  align-items: center;
  margin-bottom: 8px;
  margin-top: 8px;
}

.number {
  text-align: center;
  font-weight: bold;
  cursor: pointer;
}

.number-highlighted {
  color: #FFFFFF;
  background: #0c6fa3;
  border-radius: 50%;
  width: 27px;
  height: 27px;
}

http://jsfiddle.net/fmnhqr6x/1/

tomashauser
  • 561
  • 3
  • 16
  • What did you already try? You just need to centre it: ` text-align:center;` – FluffyKitten Aug 27 '20 at 09:33
  • Add the following to the .number-highlighted class: `display: flex; justify-content: center; align-items: center;` That should center it perfectly in the middle. – Mayari Aug 27 '20 at 09:37
  • Well, why not change `.number-highlighted` to `.number.highlighted` and remove the dash in `class="number-highlighted"`? Additionally move `width and height` to `.number` and add `line-height: 27px` to `.number` also. To top it off, add `* { outline: 1px dotted }` so you can see what is happening... – Rene van der Lende Aug 27 '20 at 10:46

0 Answers0