title: How to align Input element text in middle in mac
body: <p>I developed a website using Slate Pro Regular and Slate Pro Bold fonts. It's working fine in windows but in Mac, input element text pushed up.  Please find screenshots for reference
  <a href="https://i.stack.imgur.com/RB0Vs.png" rel="nofollow noreferrer">Input element in Windows</a> and
  <a href="https://i.stack.imgur.com/HjN1r.png" rel="nofollow noreferrer">Alignment issue in Mac chrome</a></p>
  <p>I tried below
  <a href="https://stackoverflow.com/questions/12355557/how-to-vertically-align-text-in-input-type-text">How to vertically align text in input type=&quot;text&quot;?</a> and
  <a href="https://css-tricks.com/forums/topic/vertical-align-on-text-input/" rel="nofollow noreferrer">https://css-tricks.com/forums/topic/vertical-align-on-text-input/</a></p>
  <p>Please, anyone help me to fix the Input element alignment issues in Mac.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.container {
      max-width: 1040px;
      margin: 0 auto;
  }
  .row {
      display: -ms-flexbox;
      display: flex;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;
      margin-right: -15px;
      margin-left: -15px;
  }
  
  .form-input {
      margin-bottom: 10px;
      font-size: 16px;
      font-family: 'SlatePro Bold';
      color: #565656;
  }
  
  .form-control {
      display: block;
      width: 100%;
      height: calc(1.5em + .75rem + 2px);
      padding: .375rem .75rem;
      font-size: 1rem;
      font-weight: 400;
      line-height: 1.5;
      color: #495057;
      background-color: #fff;
      background-clip: padding-box;
      border: 1px solid #ced4da;
      border-radius: .25rem;
      transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
  }
  
  .enroll-form-input.form-input input:not([type='radio']) {
      border: 1px solid #2b5795;
      font-family: 'SlatePro Regular';
      width: 100%;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;section class="enroll-doctor"&gt;
          &lt;div class="container"&gt;
          &lt;div class="row form-center"&gt;
                      &lt;div class="col-md-8 col-sm-12"&gt;
                          &lt;div class="form-input enroll-form-input"&gt;
                              &lt;label for="licensefname"&gt;License first name&lt;/label&gt;
                              &lt;input type="text" class="form-control" name="License_First_Name__c" id="licensefname" placeholder="*John" value="" maxlength="100" data-parsley-required="true" data-parsley-required-message="*License first name required" data-parsley-pattern="/^[a-zA-Z]+(([',. -][a-zA-Z ])?[a-zA-Z]*)*$/g" data-parsley-pattern-message="*Invalid License first name"&gt;
  
                          &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div class="col-md-4 col-sm-12"&gt;
                          &lt;div class="form-input enroll-form-input"&gt;
                              &lt;label for="licenselname"&gt;License last name&lt;/label&gt;
                              &lt;input type="text" class="form-control" name="License_Last_Name__c" id="licenselname" placeholder="*Smith" value="" maxlength="100" data-parsley-required="true" data-parsley-required-message="*License last name required" data-parsley-pattern="/^[a-zA-Z]+(([',. -][a-zA-Z ])?[a-zA-Z]*)*$/g" data-parsley-pattern-message="*Valid license last name required"&gt;
  
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
          &lt;/div&gt;
   &lt;/section&gt;       </code></pre>
  </div>
  </div>
  </p>