text not centered with background color

Question

so i have created this flexbox container with some flex-items:

so what i have is when i press on overview or alerts, it doesn't have this white border background color, when i press on one of them it will trigger a class called .selected and will color the background in white.

the problem is when i press on one of them the white border is not spamming the entire width ( from start to end) also the text inside the background is not centered in the middle when i press it and i don't know why

code:

<div className="container">
            <div className="flex-item item-1 item">John Smith</div>
            <div className="flex-item item-2 item">Male, 26 years old</div>
            <div className='flex-item item-3 item'onClick={setSelectedItem} style={style} > Overview</div>
            <div className='flex-item item-4 item'onClick={setSelectedItem} style={style}>Alerts</div>
            </div>
        </div>

css code:

.container {
    border: 2px solid #57c0e8;
    background-color: #57c0e8;
    margin-top: 5%;
    float: left;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
    color:white;
    display: flex;
    flex-direction: column;
    height:40rem;
    width:15rem;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-start;
    font-size:0.9rem;
}

.flex-item{
    margin-top: 2rem;
}

.selected{
    background-color: white;
    color: #57c0e8;
    border-radius: 50px 0 0 50px;
    box-shadow: 2px 2px 5px lightgray;
    width: 14rem;
    height: 5%;
    text-align: left;
}

Bojan Kolano Bojan Kolano · Accepted Answer · 2020-05-29T07:37:20

If I understood correctly, you want the white part where it says "Overview" to have the text centerent vertically. If this is the case, I would give your .selected element display:flex; align-items:center; . For the part with the width of it, seems like you have a cointainer that has a fixed width. As we dont have a codepen, I can't say for sure, but I think that width is the problem. Try removing it , and give all items but that "Overview" a padding left. Tell me what happens after you do it.

Would like me some codepen.

text not centered with background color

3 Answers