0

What I am trying to do is simple: I want my text to be centered inside a bootstrap badge. However, even when I try all the CSS and bootstrap ways to do it, nothing seems to change.

.area-value {
    display: flex;
    border: 1px solid blue;
    /*flex-flow: column;*/
}

.area {
    margin: 0;
    font-size: 15px !important;
    /*position: absolute;*/
}

enter image description here

I suspect it has something to do with the flex/stretch property because when I set the position to be absolute I get this:

enter image description here

What can I do about this?

Berk Özkan
  • 19
  • 4
  • 1
    Please add some code which you tried so that we can help you better. [Ref: How to ask a good question](https://stackoverflow.com/help/how-to-ask) – deekeh Jan 20 '22 at 08:21
  • add your html code as well. Anyway, it seems you didn't even align anything to center. `justify-content: center;` to align things horizontally inside a flexbox container, and `align-items: center;` to align things vertically. – Yong Jan 20 '22 at 08:23

0 Answers0