title: Why text is pushed towards the top of the circle
body: <p>I followed <a href="https://stackoverflow.com/questions/56650765/why-is-the-text-being-pushed-up">this</a>, <a href="https://stackoverflow.com/questions/4801181/vertically-and-horizontally-centering-text-in-circle-in-css-like-iphone-notific">this</a>, <a href="https://stackoverflow.com/questions/16615403/css-how-to-draw-circle-with-text-in-middle">this</a> and <a href="https://stackoverflow.com/questions/44674206/align-text-in-the-middle-of-a-circle-with-css">this</a> question. But the solution is not working because the problem is slightly different. I'm using a calendar component called <code>&lt;p-calendar&gt;</code> from <code>primeng</code>. It is a <code>month-picker</code> actually. This component has already a well defined styling in <code>primeng.css</code>. The component by default looks like this:</p>
  
  <p><a href="https://i.stack.imgur.com/9JXw1m.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/9JXw1m.png" alt="enter image description here"></a> </p>
  
  <p>But I want to put my styling. I want it be to encircled by blue color on hover. I have achieved this:</p>
  
  <p><a href="https://i.stack.imgur.com/BND2W.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/BND2W.png" alt="enter image description here"></a>.</p>
  
  <p>But as you can see month name is pushed towards the top and not in the middle.
  Here is <strong>primeng.css</strong> that I'm trying to modify.
  <strong>CSS that was already there</strong></p>
  
  <pre><code>.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;
  }
  </code></pre>
  
  <p><strong>CSS that I added later on</strong></p>
  
  <pre><code>.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;
  }
  </code></pre>
  
  <p>I'm not very good at styling. Any advice and suggestions will be of great help.</p>
  
  <p>PS: I also tried adding <code>padding-top: 15px</code> on <code>:hover</code> but then it started flickering.</p>