HTML 요소를 수평 및 수직 중앙에 배치
페이지를 디자인할 때 p를 중앙에 배치하고 로그인 창을 중앙에 배치하는 등 페이지 창을 기준으로 가로 및 세로로 표시해야 하는 경우가 많습니다.
지금까지 많은 방법이 모색되었습니다.
HTML:
<body>
<p class="maxbox">
<p class="minbox align-center"></p>
</p>
</body> 렌더링(다음 방법의 렌더링은 동일함):
첫 번째 유형: CSS 절대 위치 지정
은 주로 절대 위치 지정을 사용하며, 그 후 여백을 사용하여 중간 위치로 조정합니다.
상위 요소:
.maxbox{
position: relative;
width: 500px;
height: 500px;
margin: 5px;
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8), -1px -1px 1px rgba(0, 0, 0, 0.8);
}하위 요소:
.minbox{
width: 200px;
height: 200px;
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8), -1px -1px 1px rgba(0, 0, 0, 0.8);
}가로 세로 가운데 정렬:
.align-center{
position: absolute;
left: 50%;
top: 50%;
margin-left: -100px; /*width/-2*/
margin-top: -100px; /*height/-2*/
}두 번째 유형: CSS 절대 위치 지정 + Javascript/JQuery
절대 위치 지정을 주로 사용하고, Javascript/JQuery를 사용하여 중간 위치로 조정합니다. 첫 번째 방법에 비해 이 방법은 클래스의 유연성을 향상시킵니다.
상위 요소:
.maxbox{
position: relative;
width: 500px;
height: 500px;
margin: 5px;
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8), -1px -1px 1px rgba(0, 0, 0, 0.8);
}하위 요소:
.minbox{
width: 200px;
height: 200px;
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8), -1px -1px 1px rgba(0, 0, 0, 0.8);
}가로 세로 가운데 정렬:
.align-center{
position: absolute;
left: 50%;
top: 50%;
}JQuery:
$(function(){
$(".align-center").css(
{
"margin-left": ($(".align-center").width()/-2),
"margin-top": ($(".align-center").height()/-2)
}
);
});세 번째 방법: CSS3 절대 위치 지정 + 변위
절대 위치 지정과 CSS3 변환: 번역을 사용하면 동일한 효과를 얻을 수도 있습니다.
상위 요소:
.maxbox{
position: relative;
width: 500px;
height: 500px;
margin: 5px;
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8), -1px -1px 1px rgba(0, 0, 0, 0.8);
}하위 요소:
.minbox{
width: 200px;
height: 200px;
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8), -1px -1px 1px rgba(0, 0, 0, 0.8);
}가로 및 세로 가운데 정렬:
.align-center{
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
transform: translate(-50%, -50%); /*向左向上位移*/
}네번째 type : Flexbox: [텔레스코픽 레이아웃 상자 모델]
Flexbox 모델에서는 가로, 세로로 요소를 만드는 것이 너무 쉽습니다.
여기에서 HTML을 변경해야 합니다:
<p class="maxbox align-center">
<p class="minbox"></p>
</p>상위 요소:
.maxbox{
position: relative;
width: 500px;
height: 500px;
margin: 5px;
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8), -1px -1px 1px rgba(0, 0, 0, 0.8);
}하위 요소:
.minbox{
width: 200px;
height: 200px;
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8), -1px -1px 1px rgba(0, 0, 0, 0.8);
}수평 및 수직 중앙 정렬:
.align-center{
display: flex;
display: -webkit-flex; /*兼容问题*/
justify-content: center;
align-items: center;
}여러 방법 비교:
최초의 CSS 절대 위치 여백 조정, 호환성 좋음 하지만 유연성이 부족합니다. 가로, 세로 가운데 정렬해야 하는 상자가 많은 경우 너비와 높이가 다르기 때문에 .align-center 를 다르게 작성해야 합니다.
두 번째는 스크립팅 언어를 사용하는데, 이는 호환성이 좋고 첫 번째의 단점을 보완합니다. 수평 및 수직 센터링 효과는 너비와 높이의 변화에 영향을 받지 않습니다.
세 번째는 CSS3의 몇 가지 새로운 속성을 사용하며 IE10, Chrome, Firefox 및 Opera와 호환됩니다. 호환성이 그다지 좋지 않으며 가로 및 세로 센터링 효과가 너비와 높이의 변화에 영향을 받지 않습니다.
Firefox, Opera 및 Chrome과 호환되는 Flexbox 모델을 사용하면 IE가 완전히 제거됩니다. 또한 너비와 높이의 변화로 인한 수평 및 수직 센터링 효과에도 영향을 미치지 않습니다.
위 내용은 이 글의 전체 내용이므로, 모든 분들의 공부에 도움이 되었으면 좋겠습니다.
요소의 수평 및 수직 중앙 정렬에 대한 더 많은 HTML 관련 기사를 보려면 PHP 중국어 웹사이트를 주목하세요!
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
AI Hentai Generator
AI Hentai를 무료로 생성하십시오.
인기 기사
뜨거운 도구
메모장++7.3.1
사용하기 쉬운 무료 코드 편집기
SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.
스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경
드림위버 CS6
시각적 웹 개발 도구
SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)
뜨거운 주제
7564
15
1386
52
86
11
61
19
28
99
& lt; Progress & Gt의 목적은 무엇입니까? 요소?
Mar 21, 2025 pm 12:34 PM
이 기사는 HTML & lt; Progress & Gt에 대해 설명합니다. 요소, 그 목적, 스타일 및 & lt; meter & gt의 차이; 요소. 주요 초점은 & lt; progress & gt; 작업 완료 및 & lt; meter & gt; Stati의 경우
& lt; datalist & gt의 목적은 무엇입니까? 요소?
Mar 21, 2025 pm 12:33 PM
이 기사는 HTML & LT; Datalist & GT에 대해 논의합니다. 자동 완성 제안을 제공하고, 사용자 경험을 향상시키고, 오류를 줄임으로써 양식을 향상시키는 요소. 문자 수 : 159
HTML은 초보자를 위해 쉽게 배우나요?
Apr 07, 2025 am 12:11 AM
HTML은 간단하고 배우기 쉽고 결과를 빠르게 볼 수 있기 때문에 초보자에게 적합합니다. 1) HTML의 학습 곡선은 매끄럽고 시작하기 쉽습니다. 2) 기본 태그를 마스터하여 웹 페이지를 만들기 시작하십시오. 3) 유연성이 높고 CSS 및 JavaScript와 함께 사용할 수 있습니다. 4) 풍부한 학습 리소스와 현대 도구는 학습 과정을 지원합니다.
& lt; meter & gt의 목적은 무엇입니까? 요소?
Mar 21, 2025 pm 12:35 PM
이 기사는 HTML & lt; meter & gt에 대해 설명합니다. 범위 내에 스칼라 또는 분수 값을 표시하는 데 사용되는 요소 및 웹 개발의 일반적인 응용 프로그램. & lt; meter & gt; & lt; Progress & Gt; 그리고 Ex
& lt; iframe & gt; 꼬리표? 보안을 사용할 때 보안 고려 사항은 무엇입니까?
Mar 20, 2025 pm 06:05 PM
이 기사는 & lt; iframe & gt; 외부 컨텐츠를 웹 페이지, 공통 용도, 보안 위험 및 객체 태그 및 API와 같은 대안을 포함시키는 태그의 목적.
뷰포트 메타 태그는 무엇입니까? 반응 형 디자인에 중요한 이유는 무엇입니까?
Mar 20, 2025 pm 05:56 PM
이 기사는 모바일 장치의 반응 형 웹 디자인에 필수적인 Viewport Meta Tag에 대해 설명합니다. 적절한 사용이 최적의 컨텐츠 스케일링 및 사용자 상호 작용을 보장하는 방법을 설명하는 반면, 오용은 설계 및 접근성 문제로 이어질 수 있습니다.
HTML, CSS 및 JavaScript의 역할 : 핵심 책임
Apr 08, 2025 pm 07:05 PM
HTML은 웹 구조를 정의하고 CSS는 스타일과 레이아웃을 담당하며 JavaScript는 동적 상호 작용을 제공합니다. 세 사람은 웹 개발에서 의무를 수행하고 화려한 웹 사이트를 공동으로 구축합니다.
HTML의 시작 태그의 예는 무엇입니까?
Apr 06, 2025 am 12:04 AM
anexampleStartingtaginhtmlis, whithbeginsaparagraph.startingtagsareessentialinhtmlastheyinitiate rements, definetheirtypes, andarecrucialforstructurituringwebpages 및 smanstlingthedom.
