为什么将文字推到圆圈顶部

Question

我关注了this，this，this和this问题。但是该解决方案不起作用，因为问题略有不同。我正在使用<p-calendar>中名为primeng的日历组件。实际上是month-picker。该组件在primeng.css中已经有明确定义的样式。默认情况下，该组件如下所示：

但是我想表达我的风格。我希望将其悬停在蓝色周围。我已经做到了：

。

但是您可以看到，月份名称被推到顶部而不是中间。 这是我正在尝试修改的 primeng.css 。 已经存在的CSS

.ui-datepicker {
    width: 10px;
    padding: .2em;
    position: absolute;
}

.ui-datepicker.ui-datepicker-inline {
    display: inline-block;
    position: static;
}

.ui-datepicker .ui-datepicker-group {
    border-left-width: 0;
    border-right-width: 0;
    border-top-width: 0;
    border-bottom-width: 0;
}


/* Month Picker */
    .ui-monthpicker .ui-monthpicker-month {
    width: 33.3%;
    display: inline-block;
    text-align: center;
    padding: .5em;
    cursor: pointer;
}

.ui-datepicker-monthpicker select.ui-datepicker-year {
    width: auto;
}

我稍后添加的

CSS

.ui-monthpicker-month {
    border-radius: 100% !important;
    text-decoration: none;
    margin-top: 10px;
    color: #73767b;
    font-family: 'Muli', sans-serif;
    height: 50px !important;
    width: 50px !important;
    padding: 20px 20px 20px 20px;
}

.ui-monthpicker-month:hover {
    background-color: #1474A4 !important;
    color: white !important;
    text-align: center !important;
}

我不太擅长造型。任何建议都将有很大帮助。

PS：我还尝试在padding-top: 15px上添加:hover，但随后开始闪烁。

Answer 1

只需根据需要添加行高。

我添加了2em，您可以根据需要进行更改。

.ui-monthpicker .ui-monthpicker-month {
    background-color:#3399cc;
    width: 33.3%;
    display: inline-block;
    text-align: center;
    padding: .5em;
    cursor: pointer;
    line-height:2em; // <-- Add line height
}

<div class="ui-monthpicker">
   <div class="ui-monthpicker-month">Jan</div>
   <div class="ui-monthpicker-month">Feb</div> 
</div>

Answer 2

尝试在顶部和底部的填充处使用百分比作为技巧，并将height元素设置为零。

std::pair

这是屏幕截图：

------------------------------------ PC ---------------- --------------

--------------------------------平板电脑---------------- --------------

--------------------------------电话---------------- --------------