在背景颜色中正确居中文本

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

根据您所说的，您需要在文本周围填充 'Overview'。

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

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

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

在背景颜色中正确居中文本

Center text correctly in background color

css

sidebar

reactjs