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

【问题标题】：Why text is pushed towards the top of the circle为什么文本被推向圆圈的顶部
【发布时间】：2020-03-15 21:19:14
【问题描述】：

我关注了this、this、this 和this 的问题。但是解决方案不起作用，因为问题略有不同。我正在使用来自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，但它开始闪烁。

【问题讨论】：

我认为使用这个.ui-monthpicker .ui-monthpicker-month { width: 33.3%; display: inline-block; padding: 36px 30px !important; cursor: pointer; border-radius: 100% !important; text-decoration: none; font-family: 'Muli', sans-serif; } 就足够了。
@little_coder。感谢您的帮助，但它不起作用。仍然有一些问题。现在它被推到右边，圆圈现在有点椭圆形了。
我认为这取决于屏幕的大小。当我调整屏幕大小时，它确实有一些问题。
@Tanzel 如果在你身边工作，你能试试这个 css hack 吗？ .ui-monthpicker-month { color: #333333; border-radius: 100% !important; height: 0 !important; padding-top: 13% !important; padding-bottom: 20% !important; }
它在我这边运行良好。尝试过 PC、平板电脑和手机。

标签： html css sass primeng

【解决方案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 ---------------- --------------

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

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

【讨论】：

【解决方案2】：

只需根据需要添加行高。

我添加了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>

【讨论】：