다음 방법 중 하나를 사용하여 div의 요소를 쉽게 수직으로 정렬할 수 있습니다 −
- 위치 속성
- 행 높이 속성
- 채우기 속성
예시를 하나씩 살펴보겠습니다 -
위치 속성을 사용하여 div의 요소를 수직으로 정렬하세요
위치 속성은 요소 위치를 지정하는 데 사용되며 위쪽, 오른쪽, 아래쪽 및 왼쪽 속성과 함께 사용하여 원하는 위치에 요소를 배치할 수 있습니다. −
정적 − 요소 상자는 일반적인 문서 흐름의 일부로 이전 요소와 다음 요소를 따라 배치됩니다.
relative − 요소의 상자는 일반 흐름의 일부로 배치된 다음 어느 정도 거리를 두고 오프셋됩니다.
absolute − 요소의 상자는 해당 요소가 포함된 블록을 기준으로 배치되며 문서의 일반적인 흐름에서 완전히 제거됩니다.
fixed − 요소 상자는 절대 위치에 있으며 위치: 절대 동작 설명이 있습니다. 주요 차이점은 고정 위치의 요소를 포함하는 블록이 항상 뷰포트라는 것입니다.
이제 위치 속성 −
을 사용하여 div의 요소를 수직으로 정렬하는 예를 살펴보겠습니다.Example
의 중국어 번역은Example
입니다. 으아악line-height 속성을 사용하여 div의 요소를 수직으로 정렬합니다
line-height 속성은 텍스트 한 줄을 구성하는 인라인 상자의 높이를 수정합니다. line-height에 가능한 값은 다음과 같습니다 -
normal − 요소 내의 줄 높이를 "합리적인" 거리로 설정하도록 브라우저에 지시합니다.
number − 요소의 실제 줄 높이는 이 값에 요소의 글꼴 크기를 곱한 값입니다.
length − 요소의 행 높이가 지정된 값입니다.
백분율 − 요소의 행 높이는 요소 글꼴 크기의 백분율로 계산됩니다.
이제 line-height 속성을 사용하여 div의 요소를 수직으로 정렬하는 예를 살펴보겠습니다. -
Example
의 중국어 번역은Example
입니다. 으아악padding 속성을 사용하여 div의 요소를 수직으로 정렬하세요
padding 속성을 사용하면 요소의 콘텐츠와 테두리 사이에 표시되어야 하는 공간을 지정할 수 있습니다. 이 속성의 값은 길이, 백분율 또는 상속이라는 단어여야 합니다. 값이 상속인 경우 해당 패딩은 상위 요소와 동일합니다. 백분율을 사용하는 경우 백분율은 포함 상자를 기준으로 합니다.
다음 CSS 속성을 사용하여 목록을 제어할 수 있습니다. 다음 속성을 사용하여 상자의 각 측면에 대해 서로 다른 패딩 값을 설정할 수도 있습니다. -
- padding-bottom은 요소의 하단 패딩을 지정합니다.
- padding-top은 요소의 상단 패딩을 지정합니다.
- padding-left는 요소의 왼쪽 패딩을 지정합니다.
- padding-right는 요소의 올바른 패딩을 지정합니다.
- padding은 이전 속성의 약어 역할을 합니다.
이제 패딩 속성을 사용하여 div의 요소를 수직으로 정렬하는 예를 살펴보겠습니다. −
Example
의 중국어 번역은Example
입니다.<!DOCTYPE html>
<html>
<head>
<title>Align Elements</title>
<style>
#demo1 {
position: relative;
}
#demo2 {
position: absolute;
top: 50%;
height: 100px;
margin-top: -50px;
}
#demo1 {
background-color: yellow;
border: 2px solid gray;
height: 15em;
}
#demo2 {
background-color: skyblue;
border: 1px solid orange;
width: 100%;
}
</style>
</head>
<body>
<h1 id="Vertically-Align-Elements">Vertically Align Elements</h1>
<p>Use the position property:</p>
<div id="demo1">
<div id="demo2">
<p>This is a demo text</p>
<p>This is another demo text</p>
</div>
</div>
</body>
</html>
위 내용은 div 내의 요소를 수직으로 정렬하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
HTML 너머 : 웹 개발을위한 필수 기술Apr 26, 2025 am 12:04 AM강력한 기능과 우수한 사용자 경험을 가진 웹 사이트를 구축하기 위해서는 HTML만으로는 충분하지 않습니다. 다음 기술도 필요합니다. JavaScript는 웹 페이지 동적 및 상호 작용을 제공하며 DOM을 운영하여 실시간 변경을 달성합니다. CSS는 미학 및 사용자 경험을 향상시키기 위해 웹 페이지의 스타일과 레이아웃을 담당합니다. React, Vue.js 및 Angular와 같은 현대 프레임 워크 및 라이브러리는 개발 효율성 및 코드 조직 구조를 향상시킵니다.
HTML의 부울 속성은 무엇입니까? 몇 가지 예를 들어주십시오.Apr 25, 2025 am 12:01 AM부울 속성은 값없이 활성화되는 HTML의 특수 속성입니다. 1. 부울 속성은 입력 상자를 비활성화하는 등의 존재 여부에 따라 요소의 동작을 제어합니다. 2. 작업 원칙은 브라우저가 구문 분석 할 때 속성의 존재에 따라 요소 동작을 변경하는 것입니다. 3. 기본 사용법은 속성을 직접 추가하는 것이며, 고급 사용량은 JavaScript를 통해 동적으로 제어 될 수 있습니다. 4. 일반적인 실수는 값을 설정해야한다고 잘못 생각하고 올바른 글쓰기 방법은 간결해야합니다. 5. 모범 사례는 코드를 간결하게 유지하고 부울 속성을 합리적으로 사용하여 웹 페이지 성능 및 사용자 경험을 최적화하는 것입니다.
HTML 코드를 어떻게 검증 할 수 있습니까?Apr 24, 2025 am 12:04 AMHTML 코드는 온라인 유효성 검사기, 통합 도구 및 자동화 된 프로세스를 통해 깨끗할 수 있습니다. 1) w3cmarkupvalidationservice를 사용하여 온라인으로 HTML 코드를 확인하십시오. 2) 실시간 확인을 위해 VisualStudioCode에 HTMLHINT 확장을 설치하고 구성하십시오. 3) htmltidy를 사용하여 시공 프로세스에서 HTML 파일을 자동으로 확인하고 청소하십시오.
HTML vs. CSS 및 JavaScript : 웹 기술 비교Apr 23, 2025 am 12:05 AMHTML, CSS 및 JavaScript는 최신 웹 페이지를 구축하기위한 핵심 기술입니다. 1. HTML 웹 페이지 구조를 정의합니다. 2. CSS는 웹 페이지의 모양을 담당합니다.
마크 업 언어로서의 HTML : 기능과 목적Apr 22, 2025 am 12:02 AMHTML의 기능은 웹 페이지의 구조와 내용을 정의하는 것이며, 그 목적은 정보를 표시하는 표준화 된 방법을 제공하는 것입니다. 1) HTML은 타이틀 및 단락과 같은 태그 및 속성을 통해 웹 페이지의 다양한 부분을 구성합니다. 2) 콘텐츠 및 성능 분리를 지원하고 유지 보수 효율성을 향상시킵니다. 3) HTML은 확장 가능하므로 사용자 정의 태그가 SEO를 향상시킬 수 있습니다.
HTML, CSS 및 JavaScript의 미래 : 웹 개발 동향Apr 19, 2025 am 12:02 AMHTML의 미래 트렌드는 의미론 및 웹 구성 요소이며 CSS의 미래 트렌드는 CSS-In-JS 및 CSShoudini이며, JavaScript의 미래 트렌드는 WebAssembly 및 서버리스입니다. 1. HTML 시맨틱은 접근성과 SEO 효과를 향상시키고 웹 구성 요소는 개발 효율성을 향상 시키지만 브라우저 호환성에주의를 기울여야합니다. 2. CSS-in-JS는 스타일 관리 유연성을 향상 시키지만 파일 크기를 증가시킬 수 있습니다. CSShoudini는 CSS 렌더링의 직접 작동을 허용합니다. 3. Webosembly는 브라우저 애플리케이션 성능을 최적화하지만 가파른 학습 곡선을 가지고 있으며 서버리스는 개발을 단순화하지만 콜드 스타트 문제의 최적화가 필요합니다.
HTML : 구조, CSS : 스타일, 자바 스크립트 : 동작Apr 18, 2025 am 12:09 AM웹 개발에서 HTML, CSS 및 JavaScript의 역할은 다음과 같습니다. 1. HTML은 웹 페이지 구조를 정의하고, 2. CSS는 웹 페이지 스타일을 제어하고 3. JavaScript는 동적 동작을 추가합니다. 그들은 함께 현대 웹 사이트의 프레임 워크, 미학 및 상호 작용을 구축합니다.
HTML의 미래 : 웹 디자인의 진화 및 트렌드Apr 17, 2025 am 12:12 AMHTML의 미래는 무한한 가능성으로 가득합니다. 1) 새로운 기능과 표준에는 더 많은 의미 론적 태그와 WebComponents의 인기가 포함됩니다. 2) 웹 디자인 트렌드는 반응적이고 접근 가능한 디자인을 향해 계속 발전 할 것입니다. 3) 성능 최적화는 반응 형 이미지 로딩 및 게으른로드 기술을 통해 사용자 경험을 향상시킬 것입니다.
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
Video Face Swap
완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!
인기 기사
뜨거운 도구
SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)
MinGW - Windows용 미니멀리스트 GNU
이 프로젝트는 osdn.net/projects/mingw로 마이그레이션되는 중입니다. 계속해서 그곳에서 우리를 팔로우할 수 있습니다. MinGW: GCC(GNU Compiler Collection)의 기본 Windows 포트로, 기본 Windows 애플리케이션을 구축하기 위한 무료 배포 가능 가져오기 라이브러리 및 헤더 파일로 C99 기능을 지원하는 MSVC 런타임에 대한 확장이 포함되어 있습니다. 모든 MinGW 소프트웨어는 64비트 Windows 플랫폼에서 실행될 수 있습니다.
PhpStorm 맥 버전
최신(2018.2.1) 전문 PHP 통합 개발 도구
SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.
메모장++7.3.1
사용하기 쉬운 무료 코드 편집기
