푸터부분 가운대 정렬하는법?
본문
ft_info ft_cs를 모바일에서도 자동으로 사이즈 조절되면서 가운대정렬되게 해주려고 합니다.
width을 %로 주고 가운대를 정렬하면 가운대 정렬은 얼추 되는대 모바일에서 데스크톱 버젼으로 보면
글자가 짤려서 2줄로 보입니다.
가운대정렬 해보려고 wrap div로 한번 더감싸서 해줬는대 이러는게 아닌가요?
#ft .ft_wr2{margin:0 auto;}
#ft .ft_info{display:inline-block;width:auto;line-height:1.7em;}
#ft .ft_cs{display:inline-block;width:auto;text-align:right;}
#ft .ft_cs strong{font-size:1.75em;margin:5px 0;display:block}
#ft .ft_cs p{font-size:0.92em;color:#877}
<div class="ft_wr2">
<div class="ft_info">
<span><b>회사명</b> <?php echo $default['de_admin_company_name']; ?></span>
<span><b>주소</b> <?php echo $default['de_admin_company_addr']; ?></span><br>
<span><b>사업자 등록번호</b> <?php echo $default['de_admin_company_saupja_no']; ?></span>
<span><b>대표</b> <?php echo $default['de_admin_company_owner']; ?></span>
<span><b>전화</b> <?php echo $default['de_admin_company_tel']; ?></span>
<span><b>팩스</b> <?php echo $default['de_admin_company_fax']; ?></span><br>
<!-- <span><b>운영자</b> <?php echo $admin['mb_name']; ?></span><br> -->
<span><b>통신판매업신고번호</b> <?php echo $default['de_admin_tongsin_no']; ?></span>
<span><b>개인정보 보호책임자</b> <?php echo $default['de_admin_info_name']; ?></span>
<?php if ($default['de_admin_buga_no']) echo '<span><b>부가통신사업신고번호</b> '.$default['de_admin_buga_no'].'</span>'; ?><br>
Copyright © 2001-2013 <?php echo $default['de_admin_company_name']; ?>. All Rights Reserved.
</div>
<div class="ft_cs">
<h2>고객센터</h2>
<strong>*** 개인정보보호를 위한 전화번호 노출방지 ***</strong>
<p>월-금 am 9:00 - pm 05:00<br>점심시간 : am 12:00 - pm 01:00</p>
</div>
<button type="button" id="top_btn"><i class="fa fa-arrow-up" aria-hidden="true"></i><span class="sound_only">상단으로</span></button>
<script>
$(function() {
$("#top_btn").on("click", function() {
$("html, body").animate({scrollTop:0}, '500');
return false;
});
});
</script>
</div>
</div>
답변 2
#ft .ft_wr2 부분에 넓이를 지정해줘보세요~
margin:0 auto; 사용하실때에는 width값을 사용하시고자 하는 넓이로 지정해주시면
그 넓이 영역만큼 고정되서 가운데 정렬되실꺼에요~
#ft .ft_wr2 {width:1024px;margin:0 auto;}
모바일버전은 모바일용 css가 따로 있으니까 상관없을것 같구요;
음 반응형을 사용하려고 했거든요.
그럼 넓이를 지정하는게 빠르겠내요.
아무튼 감사합니다.
.ft_wr2{margin:0 auto;}
이부분을 .ft_wr2{margin:0 auto; left:50%;}
이렇게 하면 될거 같은데요
답변을 작성하시기 전에 로그인 해주세요.
