안녕하세요!
배너 슬라이드버튼 가운데 정렬 문의드립니다.
아래 이미지와같이 슬라이드배너의 버튼이 살짝 왼쪽으로 치우쳐져 있습니다.
이거를 살짝 오른쪽으로 가져와서 가운데 정렬을 하고싶습니다.

코드는 아래와 같은데 어디에 손을대야 가운데로 오나요?
Copy
<?php
if (!defined('_INDEX_')) define('_INDEX_', true);
if (!defined('_GNUBOARD_')) exit; // 개별 페이지 접근 불가
if (G5_IS_MOBILE) {
include_once(G5_THEME_MOBILE_PATH.'/index.php');
return;
}
include_once(G5_THEME_PATH.'/head.php');
add_javascript('<script src="'.G5_THEME_JS_URL.'/unslider.min.js"></script>', 10);
?>
<!--메인배너 {-->
<div id="main_bn_box">
<div id="main_bn">
<ul class="bn_ul">
<li class="bn_bg1">
<div class="bn_wr"><a href="#none"><img src="<?php echo G5_THEME_IMG_URL ?>/main_banner_2.png" alt="메인베너" /></a></div>
</li>
<li class="bn_bg1">
<div class="bn_wr"><a href="#none"><img src="<?php echo G5_THEME_IMG_URL ?>/main_banner_3.png" alt="메인베너" /></a></div>
</li>
<li class="bn_bg1">
<div class="bn_wr"><a href="#none"><img src="<?php echo G5_THEME_IMG_URL ?>/welcome2.png" alt="메인베너" /></a></div>
</li>
</ul>
</div>
</div>
<!--} 메인배너-->
<script>
$(function() {
$("#main_bn").unslider({
speed: 700, // The speed to animate each slide (in milliseconds)
delay: 3000, // The delay between slide animations (in milliseconds)
keys: true, // Enable keyboard (left, right) arrow shortcuts
dots: true, // Display dot navigation
fluid: false // Support responsive design. May bSreak non-responsive designs
});
$('.unslider-arrow').click(function() {
var fn = this.className.split(' ')[1];
// Either do unslider.data('unslider').next() or .prev() depending on the className
unslider.data('unslider')[fn]();
});
});
</script>
정말 감사합니다!
꼭좀 도와주세요 ㅠㅠ
|
답변 1개
채택된 답변
+20 포인트
※ 몇가지 방법이 있겠으나,
<script> 태그 내에서 jQuery를 사용하여 동적으로 CSS를 적용하여 보세요.
Copy
<script>
$(function() {
var unslider = $("#main_bn").unslider({
speed: 700,
delay: 3000,
keys: true,
dots: true,
fluid: false
});
var $dots = $('.unslider-nav ol');
$dots.css({
'text-align': 'center',
'position': 'absolute',
'bottom': '10px',
'left': '50%',
'transform': 'translateX(-50%)'
});
});
</script>
- bottom 값으로 아래여백은 조정하세요.
답변을 작성하려면 로그인이 필요합니다.