채택완료

모바일 갤러리 게시판 문의

2017-09-05 (화) 09:11:21 3,560

모바일에서 게시판에 갤러리 스킨을 적용하면 리스트 페이지에서 이미지가 왼쪽정렬이 됩니다.

이걸 가운데 정렬을 하고싶은데 어떻게 해야하나요?

리스트 페이지 소스

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 포인트

#bo_gall .gall_li {float:left;padding:0 20px 20px 0}

이부분을 수정하시면 될거 같긴 한데

다른부분이 영향을 끼칠수도 있겠네요

간단하게는 <div align="center"></div> 로 해당부분을 감싸보시고

안되면 class 를 추가로 하나더 css 에 추가해서 만들어야 되겠네요

답변에 대한 댓글 1개

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 이라서 그런게 아닐까요?

답변에 대한 댓글 2개

그렇게 해도 적용이 안되네요
​#bo_gall #gall_ul {align-content: center; list-style:none;}
이렇게 해도 안될까요?

무슨 스무고개 하는거 같아요 ㅋㅋ

아래의 링크를 참고하세요.

https://sir.kr/g5_skin/978 

답변을 작성하려면 로그인이 필요합니다.