＊ 위와 같은 이미지를 이용해서 모바일 디자인을 하고 있는데 잘 안되고 시간만 지체하는 부분이 있어서 명쾌한 답변을 얻고싶어 왔습니다. (검은 바탕색은 질문을 위해서 임의로 넣었습니다)

＊ 아래와 같은 디자인을 지금 모바일 슬라이딩 메뉴에 하고 있는데 지금 제 핸드폰 갤럭시 S4 LTE-A에는 가운데 정렬로 잘 나오거든요. 그런데 기기별화면으로 다른 아이패드나 갤럭시노트, 아이폰6으로 확인했을때는 글자는 가운데 정렬이 되나, 이미지가 가운데 정렬이 되지 않고 왼쪽으로 붙습니다 ㅠ

＊ 카페24 쇼핑몰솔루션으로 쇼핑몰을 만들었어요.

아래 코드가 HTML 코드입니다

<div class="m-slide-pen-quick">

<!--@css(/layout/basic/css/toplocal.css)-->

    <ul>

     <!-- 로그인하기 전 메뉴 -->

    <div module="Layout_statelogoff">

<li><a href="/member/login.html">로그인</a></li>

<li><a href="/member/join.html">회원가입</a></li>

<li><a href="/myshop/index.html">마이존</a></li>

<li><a href="/order/basket.html">장바구니</a></li>

</div>

     <!-- 로그인하고 난 메뉴 -->

  <div module="Layout_stateLogon">

<li><a href="{$action_logout}">로그아웃</a></li>  

<li><a href="/myshop/index.html">마이쇼핑</a></li>

<li><a href="/myshop/order/list.html">주문조회</a></li>

<li><a href="/order/basket.html">장바구니</a></li>

</div>

 </ul>

</div>

아래 코드가 CSS 입니다​.

.m-slide-pen-quick {overflow: hidden; margin:0 auto;}
.m-slide-pen-quick li {float: left;width: 25%;height: 58px;background: #202020;border-left: 1px solid #2e2e2e;text-align: center;
-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
.m-slide-pen-quick li:nth-child(2) a {background-size: 130px 270px;background-position: -26px -40px; text-align:center;}
.m-slide-pen-quick li:nth-child(3) a {background-size: 130px 270px;background-position: -26px -88px;text-align:center;}
.m-slide-pen-quick li:nth-child(4) a {background-size: 150px 290px;background-position: -38px -195px;text-align:center;}
.m-slide-pen-quick li a {display: block;padding: 39px 0px 10px 0px;font-size: 13px;font-weight: bold;color: #fff;letter-spacing: -1px;
background: url(/img/slidepen.png) no-repeat;background-size: 130px 270px;
background-position: -26px 8px;}
​ 

뭐가 잘못됐을까요?