html - 为什么文本被推向圆圈的顶部

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

尝试在填充顶部和底部使用百分比并将高度元素设置为零。

.ui-monthpicker-month { 
   color: #333333; 
   border-radius: 100% !important;
   height: 0 !important;
   padding-top: 13% !important;
   padding-bottom: 20% !important; 
}

.ui-monthpicker-month:hover {
    background-color: #1474A4 !important;
    color: #fff;
}

截图如下:

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

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

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