이미지가 가운데 정렬이 안됩니다.
본문
＊ 위와 같은 이미지를 이용해서 모바일 디자인을 하고 있는데 잘 안되고 시간만 지체하는 부분이 있어서 명쾌한 답변을 얻고싶어 왔습니다. (검은 바탕색은 질문을 위해서 임의로 넣었습니다)
＊ 아래와 같은 디자인을 지금 모바일 슬라이딩 메뉴에 하고 있는데 지금 제 핸드폰 갤럭시 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;}
뭐가 잘못됐을까요?
답변 1
.m-slide-pen-quick li a{
margin: 0 auto;
width: 100px;
}
위 두가지 값을 추가로 주시면 됩니다. text-align 은 배경이미지에 적용이 되지 않습니다.
li 에 float가 left로 되어있는 상태이므로 anchor 자체를 가운데로 넣으셔야 합니다.
width 값은 임의로 넣은것이므로 이미지의 크기와 글자내용의 간격을 고려하셔서 적용하시기 바랍니다.
