모바일에서 게시판에 갤러리 스킨을 적용하면 리스트 페이지에서 이미지가 왼쪽정렬이 됩니다.
이걸 가운데 정렬을 하고싶은데 어떻게 해야하나요?
리스트 페이지 소스
Copy
<!-- 게시판 목록 시작 --><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
Copy
/* 갤러리 목록 */#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개 / 댓글 3개
채택된 답변
+20 포인트
2017-09-05 (화) 09:31:55
#bo_gall .gall_li {float:left;padding:0 20px 20px 0}
이부분을 수정하시면 될거 같긴 한데
다른부분이 영향을 끼칠수도 있겠네요
간단하게는 <div align="center"></div> 로 해당부분을 감싸보시고
안되면 class 를 추가로 하나더 css 에 추가해서 만들어야 되겠네요
답변에 대한 댓글 1개
2017-09-05 (화) 09:44:15
그렇다면 해당 css 그러니까
#bo_gall #gall_ul {margin:10px 0 0;padding:0 10px;list-style:none;}
이걸
#bo_gall #gall_ul {list-style:none;}
이렇게 해보세요 왼쪽 정렬이 아니라 왼쪽 margin 이 0 이라서 그런게 아닐까요?
답변에 대한 댓글 2개
2017-09-05 (화) 10:37:06
#bo_gall #gall_ul {align-content: center; list-style:none;}
이렇게 해도 안될까요?
무슨 스무고개 하는거 같아요 ㅋㅋ
이렇게 해도 안될까요?
무슨 스무고개 하는거 같아요 ㅋㅋ
2017-09-05 (화) 09:24:01
아래의 링크를 참고하세요.
답변을 작성하려면 로그인이 필요합니다.