Невозможно переместить метку в центр поля

Question

Мне нужно выровнять css для поля авторизации Google, на скриншоте видно, что метка не центрирована.

Когда я добавляю на эту метку padding-top или margin-top, css не добавляется к элементу.

Нужна помощь, чтобы выяснить, почему.

Это HTML / JSX кнопки:

            <a className="button">
              <div>
                <span className="svgIcon t-popup-svg">
                  <svg className="svgIcon-use" width="25" height="37" viewBox="0 0 25 25">
                    <g fill="none" fillRule="evenodd">
                    // Here coming SVG CODE of icon
                    </g>
                  </svg>
                </span>
                <span className="button-label">Sign in with Google</span>
              </div>
            </a>
        </div>

Это стили, связанные с кнопкой:

.button {
  display: inline-block;
  max-width: 300px;
  padding: 0 18px;
  text-align: left;
  width: 100%;
  height: 37px;
  border-radius: 4px;
  cursor: pointer;
  background-color: #ffffff;
  box-shadow: 0 2px 7px rgba(0, 0, 0, 0.05);
  font: inherit;
  outline: none;

  .button-label {
    color: black;
    font-size: 18px;
    cursor: pointer;
    padding-top: 15px;
  }

  .svgIcon {
    vertical-align: middle;
    fill: rgba(0, 0, 0, 0.54);
    height: 37px;
    display: inline-block;
    float: right;
  }
}

Любой совет, как решить эту проблему?

Answer 1

с использованием line-height: 37px; или же присвоение свойства flex кнопке

display: flex;
align-items: center;
justify-content: space-between;

после этого дайте прокладку в соответствии с вашими потребностями.

Answer 2

Просто добавьте line-height:37px; на .button-label