Html 为什么文本会被推到圆圈的顶部

我跟着问。但解决方案不起作用，因为问题略有不同。我正在使用一个名为

的日历组件，它来自

priming

。实际上，它是一个月选择器。此组件在

priming.css

中已经有了定义良好的样式。默认情况下，组件如下所示：

但我想把我的风格。我希望它在悬停时被蓝色包围。我做到了这一点：

<>但正如你所看到的，月名被推到顶部而不是在中间。 这里是我试图修改的priming.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

，但随后它开始闪烁。

只需根据需要添加行高即可

我添加了

2em

您可以根据需要进行更改

.ui monthpicker.ui monthpicker月{
背景色：#3399cc；
宽度：33.3%；
显示：内联块；
文本对齐：居中；
填充：.5em；
光标：指针；
线条高度：2em；//只需根据需要添加线条高度即可

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


.ui monthpicker.ui monthpicker月{
背景色：#3399cc；
宽度：33.3%；
显示：内联块；
文本对齐：居中；
填充：.5em；
光标：指针；
线条高度：2em；//尝试使用填充顶部和底部的百分比做一个技巧，并将高度元素设置为零

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

以下是截图：

------------------------------个人电脑------------------------------


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


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

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

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

以下是截图：

------------------------------个人电脑------------------------------


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


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

使用此
.ui monthpicker.ui monthpicker month{width:33.3%；显示：内联块；填充：36px 30px！重要；光标：指针；边框半径：100%！重要；文本装饰：无；字体系列：“Muli”，无衬线；}
我认为已经足够好了。@little_coder.我很感谢你的帮助，但它不起作用。仍然有一些问题。现在它被推到了右边，圆圈的形状有点椭圆形。我认为这取决于屏幕的大小。当我调整屏幕大小时，它确实有一些问题。@Tanzel如果在你这边工作，你能尝试一下css破解吗？
.ui-monthpicker-month{color:#333333；边框半径：100%！重要；高度：0！重要；填充顶部：13%！重要；填充底部：20%！重要；}
对我来说效果很好。尝试了PC、平板电脑和手机。使用此
。ui-monthpicker.ui-monthpicker-month{宽度：33.3%；显示：内联块；填充：36px 30px！重要；光标：指针；边框半径：100%！重要；文本装饰：无；字体系列：“Muli”，无衬线；}
我认为已经足够好了。@little_coder.我很感谢你的帮助，但它不起作用。仍然有一些问题。现在它被推到了右边，圆圈的形状有点椭圆形。我认为这取决于屏幕的大小。当我调整屏幕大小时，它确实有一些问题。@Tanzel如果在你这边工作，你能尝试一下css破解吗？
.ui-monthpicker-month{color:#333333；边框半径：100%！重要；高度：0！重要；填充顶部：13%！重要；填充底部：20%！重要；}
在我这边运行良好。尝试过PC、平板电脑和手机。