css 아이콘 텍스트 수평 정렬하기

<div class="paging-btn">
            <ul class="clearfix">
              <li>
                <button>
                  <img src="img/ic_arrow-left_grey.svg" alt="">
                  <span>이전</span>
                </button>
              </li>
              <!-- //이전 -->
              <li>
                <button>
                  <span>다음</span>
                  <img src="img/ic_arrow-right_grey.svg" alt="">
                </button>
              </li>
              <!-- //다음 -->
            </ul>
          </div>
          <!-- //페이징버튼 -->

.paging-btn {
  text-align: center;
  margin-top: 16px !important;
  display: block;
  margin: 0 auto;
  ul {
    display: inline-block;
    li {
      float: left;
      margin-right: 16px;
      button {
        width: 80px;
        height: 48px;
        img {
          width: 15px;
          vertical-align: middle;
        }
        span {
          vertical-align: middle;
        }
      }
    }
  }