CODEWITHSUNDEEP
htmlcssangularangular-material
Julio GB
Julio GB

Reputation: 447

How to centralize icon inside small bordered element?

Is there a way to centralize text inside a bordered element? When I do border at the element, maybe because its content size is reduced, it gets decentralized.

image of the element

.circle {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: solid #00b0ff 1px;
  color: #00b0ff;
}

.button-styling {
  color: #00b0ff;
  font-size: x-large;
}

.outline-h {
  outline: thin;
  outline-color: blue;
  outline-style: solid;
}
<div style="max-width: 15px;">
  <h3> With border </h1>
    <div class="circle">
      <mat-icon class="button-styling">+</mat-icon>
    </div>
</div>
<div style="max-width: 15px;">
  <h3> Without border </h1>
    <div class="outline-h">
      <mat-icon class="button-styling">+</mat-icon>
    </div>
</div>

Upvotes: 1

Views: 89

Answers (3)

Adrian Zubieta
Adrian Zubieta

Reputation: 36

You can use flexbox to center the text element:

.circle {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: solid #00b0ff 1px;
  color: #00b0ff;
  /*Add*/
  display: flex;
  justify-content: center;
  align-items: center;
}
<div style="max-width: 15px;">
  <h3>With border</h3>
  <div class="circle">
    <mat-icon class="button-styling">+</mat-icon>
  </div>
</div>

Upvotes: 2

Max
Max

Reputation: 1025

I was able to center it using display: flex.

Check it's browser support though: https://caniuse.com/#feat=flexbox

.circle {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: solid #00b0ff 1px;
  color: #00b0ff;
  display: flex;
  justify-content: center;
  align-items: center;
}

.button-styling {
  color: #00b0ff;
  font-size: x-large;
}

.outline-h {
  outline: thin;
  outline-color: blue;
  outline-style: solid;
}
<div style="max-width: 15px;">
  <h3> With border </h1>
    <div class="circle">
      <mat-icon class="button-styling">+</mat-icon>
    </div>
</div>
<div style="max-width: 15px;">
  <h3> Without border </h1>
    <div class="outline-h">
      <mat-icon class="button-styling">+</mat-icon>
    </div>
</div>

Upvotes: 0

MistaPrime
MistaPrime

Reputation: 1677

You could try this:

.circle {
    text-align: center;
    line-height: 20px;
}

Upvotes: 0

Related Questions