css - 背景颜色中的文本正确居中

Question

所以，基本上我有一个侧边栏，它包含 div 的文本，如概述、设置等...... 像这样:

所以，我需要的是创建一个背景颜色，当我将鼠标悬停在文本上时，该背景颜色为白色。我成功做到了，结果如下:

因此，正如您所看到的，文本并未在背景颜色内居中。

因此，我所做的是分配 align-items: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;
}

希望您能理解我的问题所在，并能提供帮助，提前谢谢您!!

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
}