가운데 정렬 질문
본문
안녕하세요 커뮤니티 사이트 기획중인 고등학교 2학년 학생입니다.
사이트 개발 도중 질문이 생겨서 게시글을 작성하게 되었습니다.
현재 제 사이트 포인트게임 부메뉴에 있는 가위바위보 게임으로 접속했을때 화면입니다.
여기서 가위,바위,보 중 하나를 클릭하게 되면,
이런 화면이 나오는데요, 이화면을 가운데로 정렬하고싶습니다.
어떤 파일을 어떻게 수정하여야 할까요?
추가로 글씨 부분에 운영자님 , 컴퓨터 부분의 버튼글씨(?) 를 현재 사진 기준 왼쪽 주먹 가운데 위쪽에 운영자님, 오른쪽 주먹 가운데 위쪽에 컴퓨터가 쓰여지도록 하고싶습니다.
(컴퓨터,태블릿,pc 어느 기기로 접속하여도 잘 보이도록 하고 싶습니다.
어떤 파일을 어떻게 수정하여야 하는지 도와주세요~
가위바위보게임 플러그인은 그누보드5 플러그인 게시판에 있는것과 같은 플러그인입니다~
답변 2
<div class='str_er'> </div> 코드부터 HTML 시작 부분에 해당돼요.
맨 밑에 소스도 일부 짤려서 안 보이는데...
HTML에 해당하는 코드 전체를 div로 감싸서 아래처럼 스타일 주시면 될 듯...
<div style="margin:0 auto; width:00px">
HTML에 해당하는 코드 전체
</div>
<div style='clear:both;'>
<div style="float:left; margin:0 auto; width:100px;"><input type='button' class='str_btn' value=' <?php echo $member[mb_nick]?>님 '></div>
<div style="float:right; margin:0 auto; width:100px;"><input type='button' class='str_btn' value=' 컴퓨터 '></div>
</div>
<div class='str_er'> </div>
<div class='str_con'>
<img src="./img/<?php echo $game_on?>_<?php echo $strgame_vsmy?>.png" style="border:1px solid #dddddd;" hspace="5">
<img src='./img/vspr.png' border='0' hspace="15">
<img src="./img/<?php echo $game_rand?>_<?php echo $strgame_vscom?>.png" style="border:1px solid #dddddd;" hspace="5">
</div>
<div class='str_er'> </div>
<div class='str_bton'>
<?php echo $strgame_vsname?>
<br /><br />
<input type=button class='str_btnok' value=' 누가 이기나 끝까지 가보장!! ' onclick="document.location.href='./game.php?spr=<?php echo $sprgame_mode?>';" style="cursor:pointer;" />
<input type=button class='str_btn' value=' 일하러 GO ~ ' onclick="document.location.href='<?php echo G5_URL ?>';" style="cursor:pointer;" />
</div>
<div class='str_er'> </div>
<div class='str_er'> </div>
<?php
include_once("./_tail.php");
?>
짤린 부분입니다 ㅎㅎ
맨 밑에 아래 코드 바로 위에 닫는 </div> 넣으시면 될 듯 합니다.
<?php
include_once("./_tail.php");
?>
말씀하신대로 수정하였는데 조금 이상하게 되었어요 ㅎ ㅜㅜ 게시글 수정해서 결과 사진올릴게요~
게시글 수정이 안되어 따로 게시글 작성했습니다
https://sir.kr/qa/210872?page=0&posting=ok&sst=wr_num 결과 사진입니다 ㅠㅠ
인라인 요소 경우엔 부모 요소에 text-align:center 주시면 되구요,
블럭 요소인 경우엔 해당 요소에 margin:0 auto; width:00px 주시면 됩니다.
[참고]
인라인 블럭 요소 정의
<?php
$g5_path = ".."; // common.php 의 상대 경로
include_once("$g5_path/common.php");
header("Expires: Mon 26 Jul 1997 05:00:00 GMT");
header("Last-Modified: " . gmdate("D, d, M Y H:i:s") . " GMT");
header("Cache-Control: no-store, no-cache, must-revalidate");
header("Cache-Control: post-check=0, pre-check=0", false);
header("Pragma: no-cache");
//설정 로드
include_once("./setup.php");
$g5['title'] = $game_name;
include_once("./_head.php");
if (!$sprgame_mode) {
alert("게임모드가 없습니다.", G5_URL);
}
if (!$game_on) {
alert("게임 값이 없습니다.", G5_URL);
}
//토큰 키를 재생성후 넘어온 토큰과 비교함
$ckey1 = date("ymd");
$ckey2 = $member['mb_point'];
$ckey3 = $member['mb_id'];
$stokenkey = substr(md5($ckey1.$ckey2.$ckey3.$sprgame_mode),0,12);
$gametokenkey = $_POST['tokenkey'];
if (!$gametokenkey) {
alert("정상적인 방법으로 게임을 진행하세요.", G5_URL);
}
if ($stokenkey !=$gametokenkey) {
alert("정상적인 방법으로 게임을 진행하세요.", G5_URL);
}
if ($game_on == $game_rand) {
$strgame_vsname = "<b><font size='3' color='#4BACC6'>아쉽게 비겼습니다. 수수료 ".number_format($game_point_bglose)." 포인트 차감! 다시한번 도전장을...</font></b>";
$strgame_vsmy = "off";
$strgame_vscom = "off";
// 비겼을경우 수수료 포인트차감
insert_point($member[mb_id], $game_point_bglose * (-1), "가위바위보게임비김 수수료 포인트차감", '@sprgame', $member[mb_id], G5_TIME_YMDHIS);
}
if ($game_on =='1' && $game_rand =='2') {
$strgame_vsname = "<b><font size='3' color='#ff0000'>이런 내가 지다니ㅠㅠ... ".number_format($game_point_lose)." 포인트 차감!!!</font></b>";
$strgame_vsmy = "off";
$strgame_vscom = "on";
// 패배
insert_point($member[mb_id], $game_point_lose * (-1), "가위바위보게임 패배 포인트차감", '@sprgame', $member[mb_id], G5_TIME_YMDHIS);
}
if ($game_on =='1' && $game_rand =='3') {
$strgame_vsname = "<b><font size='3' color='#0070C0'>앗싸!! 나의 승리다. ".number_format($game_point)." 포인트 획득!!!</font></b>";
$strgame_vsmy = "on";
$strgame_vscom = "off";
//게임승
insert_point($member[mb_id], $game_point, "가위바위보게임 승리 포인트획득", '@sprgame', $member[mb_id], G5_TIME_YMDHIS);
}
if ($game_on =='2' && $game_rand =='3') {
$strgame_vsname = "<b><font size='3' color='#ff0000'>이런 내가 지다니ㅠㅠ...<b> ".number_format($game_point_lose)." 포인트 차감!!!</font></b>";
$strgame_vsmy = "off";
$strgame_vscom = "on";
// 패배
insert_point($member[mb_id], $game_point_lose * (-1), "가위바위보게임 패배 포인트차감", '@sprgame', $member[mb_id], G5_TIME_YMDHIS);
}
if ($game_on =='2' && $game_rand =='1') {
$strgame_vsname = "<b><font size='3' color='#0070C0'>앗싸!! 나의 승리다. ".number_format($game_point)." 포인트 획득!!!</font></b>";
$strgame_vsmy = "on";
$strgame_vscom = "off";
//게임승
insert_point($member[mb_id], $game_point, "가위바위보게임 승리 포인트획득", '@sprgame', $member[mb_id], G5_TIME_YMDHIS);
}
if ($game_on =='3' && $game_rand =='1') {
$strgame_vsname = "<b><font size='3' color='#ff0000'>이런 내가 지다니ㅠㅠ...<b> ".number_format($game_point_lose)." 포인트 차감!!!</font></b>";
$strgame_vsmy = "off";
$strgame_vscom = "on";
// 패배
insert_point($member[mb_id], $game_point_lose * (-1), "가위바위보게임 패배 포인트차감", '@sprgame', $member[mb_id], G5_TIME_YMDHIS);
}
if ($game_on =='3' && $game_rand =='2') {
$strgame_vsname = "<b><font size='3' color='#0070C0'>앗싸!! 나의 승리다. ".number_format($game_point)." 포인트 획득!!!</font></b>";
$strgame_vsmy = "on";
$strgame_vscom = "off";
//게임승
insert_point($member[mb_id], $game_point, "가위바위보게임 승리 포인트획득", '@sprgame', $member[mb_id], G5_TIME_YMDHIS);
}
?>
<link rel="stylesheet" href="style.css" type="text/css">
<div class='str_er'> </div>
<div class='str_ersub'>
<input type='button' class='str_btn<?php echo ($sprgame_mode==1)?'ok':''?>' value='고정포인트게임' />
<input type='button' class='str_btn<?php echo ($sprgame_mode==2)?'ok':''?>' value='단일랜덤포인트게임' />
<input type='button' class='str_btn<?php echo ($sprgame_mode==3)?'ok':''?>' value='쌍방랜덤포인트게임' />
<input type='button' class='str_btn' value='게임그만할래~' onclick="document.location.href='<?php echo G5_URL ?>';" style="cursor:pointer;" />
</div>
<div class='str_er'> </div>
<div class='str_topon'>
<img src='./img/btn_notice.gif' border='0' align='absmiddle'> 이게임은 회원님의 포인트와 연동되는 게임이며 보유중인 포인트의 파산시 본인의 책임 입니다.<br />
<div id="choonDiv" style="clear:both; width:650px; height:30px; padding:5px 5px 5px 5px; text-align:center;"></div>
<script language='javascript'>
function Timer() {
setTimeout("locateKap()",5000);
}
function locateKap(){
location.replace("./game.php?spr=<?php echo $sprgame_mode?>");
}
cnt = 5; // 카운트다운 시간 초단위로 표시
function countdown() {
if(cnt == 0){
// 시간이 0일경우
locateKap();
}else {
// 시간이 남았을 경우 카운트다운을 지속한다.
document.all.choonDiv.innerHTML ="<font size='4' color='red'><b>" + cnt + " </b></font> 초 후에 게임시작 페이지로 이동이 됩니다.";
setTimeout("countdown()",1000);
cnt--;
}
}
$(document).ready(function() {
Timer();
});
countdown();
</script>
</div>
<div class='str_er'> </div>
<div style='clear:both;'>
<div style="float:left; margin:0 auto; width:100px;"><input type='button' class='str_btn' value=' <?php echo $member[mb_nick]?>님 '></div>
<div style="
이 파일을 어떻게 수정해야하나요..? 초보라서 말씀하신 내용으로 해결을 잘 못하겠어요 ㅠ
그리구 두번째 사진보시면 메뉴부분이 깨지는(?) 데 이것도 해결 가능할까요..?
메뉴 깨지는 부분은 HTML CSS에 대한 공부를 좀 하시면 스스로 해결가능할 듯..
사이트 개발하신다고 하니, 일단 위 두 언어는 필수적으로 공부하셔야 할 거에요.
현재, 무료 오픈 중인 학습 과정이니, 유료 과정으로 닫히기 전에 얼른 학습해 보세요.
HTML https://homzzang.com/b/html
CSS https://homzzang.com/b/css
