Center text correctly in background color

user_9141427 0
Viewed 593

So, basically I have a sidebar and it contains text which is divs like overview, settings, etc... like this:

div

So, what I need is to create a background color which is white when I hover on the text. I managed to do that and this was the result:

what i did

So, as you can see the text is not centered inside the background color.

Therefore what I did is to assign align-items:center and it worked like this:

fix

But now my problem is the text is not fixed. meaning when I applied align-items the background remained in the same position but the text moved to occupy the center position. I don't want the text to move I want the text to remain at the same position but the background color to move to cover it and make the text center

div:

const style={
        cursor: "pointer",
        height:"30px"
    };

    return (
        <div 
            name={name}
            title = {title}
            style={style}
            onClick={() => onSelect(name)}
            className={selected ? 'selected' : 'hovered'}>
           <div style={{paddingLeft: "10px"}} className="last-hope">{name}</div>
        </div>

css:

.hovered:hover {
    background-color: white;
    color: #57c0e8;
    padding-left: 3px;
    border-radius: 50px 0 0 50px;
    box-shadow: 2px 2px 5px lightgray;
    display:flex; 
    align-items:center;
    text-align: left;
    margin-left:3px;
}

Hope you understood what my problem is and you can help thank you in advance!!

reactjs sidebar css
2 Answers

Based on what you said, you want a padding around the text 'Overview'.

From the code you have given, I suppose you are putting up a div on hover. If that's the case, a div takes up all the horizontal space by default. You can limit that by giving it a width.

But based on what you want, you turn on the padding on hover.

HTML:

<p class="decorate">Overview</p>

CSS:

.decorate{
  text-align: center;
  padding: 2rem;
}

.decorate:hover{
  background-color: white;
  //add box radius property to round the edges
}
user_137897410

Put the styles to the DIV itself, not only to its hovered state:

const style={
        display: flex;
        align-items:center;
        cursor: "pointer",
        height:"30px"
};
user_137902830
Related