CODEWITHSUNDEEP
javascriptcssreactjs
FairyQueen
FairyQueen

Reputation: 2373

How to center text within a border-radius?

I have a border-radius circling a letter grade but not all of the letters appear centered within their border radius. For example the letter D looks the worst:

enter image description here

Does anyone know of a way to make sure the text inside of the border radius always appears centered? (This app uses react if it matters.)

Here is the css for it:

const buttonStyle = {
  width: 40,
  height: 40,
  borderRadius: 100,
  borderWidth: 2,
  borderColor: stylesColors.grey,
  padding: 0,
  marginRight: 15,
  fontSize: 27,
  textAlign: 'center',
  verticalAlign: 'middle',
  display: 'table-cell'
};

And the html though I doubt it matters much:

grades.map((grade, index) => {
  return (
    <Track key={index}>
      <Button
        className={(grade.letter === value.grade) ? 'green-button' : null}
        style={buttonStyle}
        id={`reviews--rating-${ratingTypeName}--${grade.letter}`}
        key={index}
        data-track-autopopulated={false}
        data-track-rating-type={`${ratingTypeName.toLowerCase()}Grade`}
        data-track-selected-grade={grade.letter}
        data-track-draft-review-id={draftReviewId}
        data-track-service-provider-id={serviceProviderId}
        onClick={() => this.handleSelect(grade.letter)}>
        {grade.letter}
      </Button>
    </Track>
  );
})

Upvotes: 2

Views: 665

Answers (2)

Xenio Gracias
Xenio Gracias

Reputation: 2758

is this what you want?

div {
  height: 30px;
  width: 30px;
  border: 1px solid black;
  border-radius: 50%;
  display: inline-block;
}

span {
  display: inline-block;
  margin-top: 50%;
  margin-left: 50%;
  transform: translate(-50%, -50%);
}
<div>
  <span>
  A</span>
</div>

<div>
  <span>
  B</span>
</div>

<div>
  <span>
  C</span>
</div>

<div>
  <span>
  D</span>
</div>

Upvotes: 2

Mos&#232; Raguzzini
Mos&#232; Raguzzini

Reputation: 15821

There are some issues in your css/scaffolding as isolating the snipped results in correctly centered items:

 .centerRound{
  width: 40px;
  height: 40px;
  border-radius: 100%;
  border: 2px solid grey;
  padding: 0px;
  margin-right: 15;
  font-size: 27;
  text-align: center;
  vertical-align: middle;
  display: table-cell;
  font-size:35px;
  }
  
<div class="centerRound">A</div>
<div class="centerRound">B</div>
<div class="centerRound">C</div>
<div class="centerRound">D</div>

Upvotes: 3

Related Questions