无法在视场中心移动标签

Question

我需要将css与google auth字段对齐，您可以在屏幕截图上看到标签未居中。

当我在该标签的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