Why text is pushed towards the top of the circle

Question

I followed this, this, this and this question. But the solution is not working because the problem is slightly different. I'm using a calendar component called <p-calendar> from primeng. It is a month-picker actually. This component has already a well defined styling in primeng.css. The component by default looks like this:

But I want to put my styling. I want it be to encircled by blue color on hover. I have achieved this:

.

But as you can see month name is pushed towards the top and not in the middle. Here is primeng.css that I'm trying to modify. CSS that was already there

.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 that I added later on

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

I'm not very good at styling. Any advice and suggestions will be of great help.

PS: I also tried adding padding-top: 15px on :hover but then it started flickering.

Using this `.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; }` is good enough I think. — little_coder, Nov 20 '19 at 08:40
@little_coder. I appreciate your help but its not working.Still have some issues. Nnow it is pushed to the right and the circle is somewhat oval in shape now. — Tanzeel, Nov 20 '19 at 08:44
I think it depend on the size of the screen. When I resize my screen it does have some issue. — little_coder, Nov 20 '19 at 08:53
@Tanzel can you try this css hack if working on your side? `.ui-monthpicker-month { color: #333333; border-radius: 100% !important; height: 0 !important; padding-top: 13% !important; padding-bottom: 20% !important; }` — little_coder, Nov 20 '19 at 12:07
@little_coder Then i think because of my hard coding the padding and margins it is giving me problems. — Tanzeel, Nov 20 '19 at 15:56
@little_coder. Post this as an answer so that I can accept it. — Tanzeel, Nov 20 '19 at 15:56

score 1 · Answer 1 · answered Nov 20 '19 at 16:10

Just add line-height as you need.

I added 2em you can change as required.

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

score 1 · Accepted Answer · answered Nov 21 '19 at 00:52

Try to do a trick using percentage on the padding top and bottom and set the height element to zero.

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

And here is the screenshots:

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

------------------------------ Tablet ------------------------------

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

Why text is pushed towards the top of the circle

2 Answers2