以背景颜色正确居中文本

Question

所以，基本上我有一个侧边栏，其中包含 divs 的文本，例如概述、设置等... 像这样：

所以，当我将鼠标悬停在文本上时，我需要创建一个白色的背景颜色。我设法做到了，这就是结果：

所以，如您所见，文本不在背景颜色中居中。

因此我所做的是分配align-items:center，它的工作原理是这样的：

但现在我的问题是文本不固定。这意味着当我应用 align-items 时，背景保持在相同的位置，但文本移动到占据中心位置。我不希望文本移动我希望文本保持在同一位置但背景颜色移动以覆盖它并使文本居中

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;
}

希望你明白我的问题是什么，你能帮助提前谢谢你！

Answer 1

根据您所说的，您希望在文本“概览”周围有一个填充。

根据您提供的代码，我想您在悬停时放置了一个 div。如果是这种情况，则默认情况下 div 会占用所有水平空间。你可以通过给它一个宽度来限制它。

但根据您的需要，您可以在悬停时打开填充。

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
}

Answer 2

将样式放入 DIV 本身，而不仅仅是其悬停状态：

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