HTML 이미지 화면 중앙 - HTML imiji hwamyeon jung-ang

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<style>

html, body {width:100%;height:100%;margin:0;padding:0;}

body {position:relative;}

.box1 {position:absolute;top:50%; left:50%;margin-left:-505px;margin-top:-185px;}

</style>

</head>

<body>

</div>

</body>

</html>

DIV로 안내 페이지 만들기

안녕하세요.

고코더 입니다.

오늘은 DIV를 화면 가운데 중앙에 위치 하게

하는 방법을 알아보겠습니다.

● 1. 제가 만든 모니터 체크 사이트에서 사용한 HTML 입니다.

안내 페이지로 반응형으로 DIV를 화면 가운데로 노출하였습니다.

● 2. HTML을 웹에서 실행 해보세요.

<html>

<head>

.layer {

position: absolute;

text-align: center;

width: 100%;

height: 100%;

top: 0;

left: 0;

font-size: 50px;

}

.layer .content {

display: inline-block;

vertical-align: middle

}

.layer .blank {

display: inline-block;

width: 0;

height: 100%;

vertical-align: middle

}

</style>

</head>

<body>

<span class="content">div를 화면 가운데 놓기 gocoder.net</span>

</div>

</body>

</html>

● 3. 결과 모습입니다.

간단한 안내 페이지로 활용할때 좋은 방법입니다.

마무리

사람들은 HTML 형식에서도

신뢰를 얻습니다.

HTML 이미지 정렬 HTML 가운데 정렬

HTML 이미지 화면 중앙 - HTML imiji hwamyeon jung-ang

관련 게시물

자바 스크립트 이미지 클릭 팝업 - jaba seukeulibteu imiji keullig pab-eob

알집 ISO 파일 만들기 - aljib ISO pail mandeulgi

메타 태그 적용 안됨 - meta taegeu jeog-yong andoem

이미지 RGB 값 추출 - imiji RGB gabs chuchul

Flex div 겹치기 - Flex div gyeobchigi

Png DPI 확인 - Png DPI hwag-in

사진 자르는 사이트 - sajin jaleuneun saiteu

웹페이지 로딩 과정 - webpeiji loding gwajeong

Jpg 해상도 확인 - Jpg haesangdo hwag-in

네이버카페 타이틀 이미지 - neibeokape taiteul imiji

광고하는

최근 소식

미밴드 6 APP 에 연결 후 다시 업데이트 - mibaendeu 6 APP e yeongyeol hu dasi eobdeiteu

맥용 워드 무료 다운로드 - maeg-yong wodeu mulyo daunlodeu

UFC 여자 순위 - UFC yeoja sun-wi

원피스 과학 기술 - wonpiseu gwahag gisul

과일 쥬스 궁합 - gwail jyuseu gunghab

죽음 암시 노래 - jug-eum amsi nolae

이산화탄소 배출량 - isanhwatanso baechullyang

지박소년 하나코 군 리디 북스 - jibagsonyeon hanako gun lidi bugseu

헤드 라인 R 폰트 - hedeu lain R ponteu

인스타 스토리 좋아요 안뜸 - inseuta seutoli joh-ayo antteum

광고하는

포퓰러

광고하는

에 대한

합법적인

돕다

사회의