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

Question

我关注了 , this, this and 问题。但解决方案不起作用，因为问题略有不同。我正在使用来自 primeng 的名为 <p-calendar> 的日历组件。实际上是 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：我也尝试在 :hover 上添加 padding-top: 15px，但随后它开始闪烁。

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

尝试在填充顶部和底部使用百分比来做一个技巧，并将高度元素设置为零。

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

这是屏幕截图：

---------------------------- 电脑------------ --------------

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

----------------------------- Phone ---------- --------------------

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

Why text is pushed towards the top of the circle

html

css

sass

primeng