모바일 갤러리 게시판 문의
본문
모바일에서 게시판에 갤러리 스킨을 적용하면 리스트 페이지에서 이미지가 왼쪽정렬이 됩니다.
이걸 가운데 정렬을 하고싶은데 어떻게 해야하나요?
리스트 페이지 소스
<!-- 게시판 목록 시작 -->
<div id="bo_gall">
<?php if ($is_category) { ?>
<nav id="bo_cate">
<h2><?php echo ($board['bo_mobile_subject'] ? $board['bo_mobile_subject'] : $board['bo_subject']) ?> 카테고리</h2>
<ul id="bo_cate_ul">
<?php echo $category_option ?>
</ul>
</nav>
<?php } ?>
<div class="bo_fx">
<div id="bo_list_total">
<span>Total <?php echo number_format($total_count) ?>건</span>
<?php echo $page ?> 페이지
</div>
<?php if ($rss_href || $write_href) { ?>
<ul class="btn_bo_user">
<?php if ($rss_href) { ?><li><a href="<?php echo $rss_href ?>" class="btn_b01">RSS</a></li><?php } ?>
<?php if ($admin_href) { ?><li><a href="<?php echo $admin_href ?>" class="btn_admin">관리자</a></li><?php } ?>
<?php if ($write_href) { ?><li><a href="<?php echo $write_href ?>" class="btn_b02">글쓰기</a></li><?php } ?>
</ul>
<?php } ?>
</div>
<form name="fboardlist" id="fboardlist" action="./board_list_update.php" onsubmit="return fboardlist_submit(this);" method="post">
<input type="hidden" name="bo_table" value="<?php echo $bo_table ?>">
<input type="hidden" name="sfl" value="<?php echo $sfl ?>">
<input type="hidden" name="stx" value="<?php echo $stx ?>">
<input type="hidden" name="spt" value="<?php echo $spt ?>">
<input type="hidden" name="sst" value="<?php echo $sst ?>">
<input type="hidden" name="sod" value="<?php echo $sod ?>">
<input type="hidden" name="page" value="<?php echo $page ?>">
<input type="hidden" name="sw" value="">
<h2>이미지 목록</h2>
<?php if ($is_checkbox) { ?>
<div id="gall_allchk">
<label for="chkall" class="sound_only">현재 페이지 게시물 전체</label>
<input type="checkbox" id="chkall" onclick="if (this.checked) all_checked(true); else all_checked(false);">
</div>
<?php } ?>
<ul id="gall_ul">
<?php for ($i=0; $i<count($list); $i++) {
?>
<li class="gall_li <?php if ($wr_id == $list[$i]['wr_id']) { ?>gall_now<?php } ?>">
<?php if ($is_checkbox) { ?>
<label for="chk_wr_id_<?php echo $i ?>" class="sound_only"><?php echo $list[$i]['subject'] ?></label>
<input type="checkbox" name="chk_wr_id[]" value="<?php echo $list[$i]['wr_id'] ?>" id="chk_wr_id_<?php echo $i ?>">
<?php } ?>
<span class="sound_only">
<?php
if ($wr_id == $list[$i]['wr_id'])
echo "<span class=\"bo_current\">열람중</span>";
else
echo $list[$i]['num'];
?>
</span>
<ul class="gall_con">
<li class="gall_href">
<a href="<?php echo $list[$i]['href'] ?>">
<?php
if ($list[$i]['is_notice']) { // 공지사항 ?>
<strong style="width:<?php echo $board['bo_mobile_gallery_width'] ?>px;height:<?php echo $board['bo_mobile_gallery_height'] ?>px">공지</strong>
<?php
} else {
$thumb = get_list_thumbnail($board['bo_table'], $list[$i]['wr_id'], $board['bo_mobile_gallery_width'], $board['bo_mobile_gallery_height']);
if($thumb['src']) {
$img_content = '<img src="'.$thumb['src'].'" alt="'.$thumb['alt'].'" width="'.$board['bo_mobile_gallery_width'].'" height="'.$board['bo_mobile_gallery_height'].'">';
} else {
$img_content = '<span style="width:'.$board['bo_mobile_gallery_width'].'px;height:'.$board['bo_mobile_gallery_height'].'px">no image</span>';
}
echo $img_content;
}
?>
</a>
</li>
<li class="gall_text_href">
<a href="<?php echo $list[$i]['href'] ?>">
<?php echo $list[$i]['subject'] ?>
</a>
<?php
// if ($list[$i]['link']['count']) { echo '['.$list[$i]['link']['count']}.']'; }
// if ($list[$i]['file']['count']) { echo '<'.$list[$i]['file']['count'].'>'; }
// if (isset($list[$i]['icon_new'])) echo $list[$i]['icon_new'];
// if (isset($list[$i]['icon_hot'])) echo $list[$i]['icon_hot'];
//if (isset($list[$i]['icon_file'])) echo $list[$i]['icon_file'];
//if (isset($list[$i]['icon_link'])) echo $list[$i]['icon_link'];
//if (isset($list[$i]['icon_secret'])) echo $list[$i]['icon_secret'];
?>
</li>
<?php if ($is_good) { ?><li><span class="gall_subject">추천</span><strong><?php echo $list[$i]['wr_good'] ?></strong></li><?php } ?>
<?php if ($is_nogood) { ?><li><span class="gall_subject">비추천</span><strong><?php echo $list[$i]['wr_nogood'] ?></strong></li><?php } ?>
</ul>
</li>
<?php } ?>
<?php if (count($list) == 0) { echo "<li class=\"empty_list\">게시물이 없습니다.</li>"; } ?>
</ul>
<?php if ($list_href || $is_checkbox || $write_href) { ?>
<div class="bo_fx">
<ul class="btn_bo_adm">
<?php if ($list_href) { ?>
<li><a href="<?php echo $list_href ?>" class="btn_b01"> 목록</a></li>
<?php } ?>
<?php if ($is_checkbox) { ?>
<li><input type="submit" name="btn_submit" value="선택삭제" onclick="document.pressed=this.value"></li>
<li><input type="submit" name="btn_submit" value="선택복사" onclick="document.pressed=this.value"></li>
<li><input type="submit" name="btn_submit" value="선택이동" onclick="document.pressed=this.value"></li>
<?php } ?>
</ul>
<ul class="btn_bo_user">
<li><?php if ($write_href) { ?><a href="<?php echo $write_href ?>" class="btn_b02">글쓰기</a><?php } ?></li>
</ul>
</div>
<?php } ?>
</form>
</div>
style.css
/* 갤러리 목록 */
#bo_gall { text-align:center;}
#bo_gall h2 {margin:0;padding:0;width:0;height:0;font-size:0;line-height:0;overflow:hidden}
#bo_gall #gall_allchk {margin:0 10px}
#bo_gall #gall_ul {margin:10px 0 0;padding:0 10px;list-style:none;}
#bo_gall #gall_ul:after {display:block;visibility:hidden;clear:both;content:""}
#bo_cate h2 {width:0;height:0;font-size:0;line-height:0;overflow:hidden}
#bo_cate ul {margin:10px;padding-left:1px;zoom:1}
#bo_cate ul:after {display:block;visibility:hidden;clear:both;content:""}
#bo_cate li {float:left;margin-bottom:-1px;width:20%}
#bo_cate a {display:block;position:relative;margin-left:-1px;padding:12px 0;border:1px solid #d9d9d9;background:#f7f7f7;color:#888;text-align:center;text-decoration:none;letter-spacing:-0.1em}
#bo_cate a:focus, #bo_cate a:hover, #bo_cate a:active {text-decoration:none}
#bo_cate #bo_cate_on {z-index:2;border:1px solid #3b79ad;background:#3b79ad;color:#fff;font-weight:bold}
#bo_gall .gall_li {float:left;padding:0 20px 20px 0}
#bo_gall .gall_clear {clear:both}
#bo_gall .gall_con {margin:0;padding:0;list-style:none}
#bo_gall .gall_con li {margin:0 0 5px}
#bo_gall .gall_con .gall_subject {display:inline-block;width:50px}
#bo_gall .gall_now .gall_text_href a {color:#ff3061}
#bo_gall .gall_href a:link, #bo_gall .gall_href a:focus, #bo_gall .gall_href a:hover {text-decoration:none}
#bo_gall .gall_href strong, #bo_gall .gall_href span {display:block;width:174px;height:124px;background:#f7f7f7;text-align:center;line-height:8em}
#bo_gall .gall_text_href {margin:10px 0 !important}
#bo_gall .gall_text_href a {color:#000;font-weight:bold;text-decoration:none}
#bo_gall .gall_text_href img {margin:0 0 0 5px}
/* 게시판 목록 공통 */
.bo_fx {margin-bottom:5px;padding:5px 10px}
.bo_fx:after {display:block;visibility:hidden;clear:both;content:""}
.bo_fx ul {margin:0;padding:0;list-style:none}
#bo_list_total {float:left;padding:0;height:2.5em;line-height:2.5em}
.btn_bo_user {float:right;margin:0;padding:0;list-style:none}
.btn_bo_user li {float:left;margin-left:5px}
.btn_bo_adm {float:left}
.btn_bo_adm li {float:left;margin-right:5px}
.btn_bo_adm input {padding:8px;border:0;background:#e8180c;color:#fff;text-decoration:none;vertical-align:middle}
.bo_notice td {background:#f7f7f7}
.bo_notice td a {font-weight:bold}
.td_num strong {color:#000}
.bo_cate_link {display:inline-block;margin:0 3px 0 0;padding:0 6px 0 0;border-right:1px solid #e7f1ed;color:#999 !important;font-weight:bold;text-decoration:none} /* 글제목줄 분류스타일 */
.bo_current {color:#e8180c}
.td_subject img {margin-left:3px}
.cnt_cmt {font-weight:bold}
#bo_sch {margin-bottom:10px;padding-top:5px;text-align:center}
#bo_gall li.empty_list {padding:30px 0;text-align:center}
답변 3
#bo_gall .gall_li {float:left;padding:0 20px 20px 0}
이부분을 수정하시면 될거 같긴 한데
다른부분이 영향을 끼칠수도 있겠네요
간단하게는 <div align="center"></div> 로 해당부분을 감싸보시고
안되면 class 를 추가로 하나더 css 에 추가해서 만들어야 되겠네요
align="center"를 했는데 적용이 안되요..
그렇다면 해당 css 그러니까
#bo_gall #gall_ul {margin:10px 0 0;padding:0 10px;list-style:none;}
이걸
#bo_gall #gall_ul {list-style:none;}
이렇게 해보세요 왼쪽 정렬이 아니라 왼쪽 margin 이 0 이라서 그런게 아닐까요?
그렇게 해도 적용이 안되네요
#bo_gall #gall_ul {align-content: center; list-style:none;}
이렇게 해도 안될까요?
무슨 스무고개 하는거 같아요 ㅋㅋ
답변을 작성하시기 전에 로그인 해주세요.
