Reputation: 447
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.
.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
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
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
Reputation: 1677
You could try this:
.circle {
text-align: center;
line-height: 20px;
}
Upvotes: 0