'수직 정류'속성과 일반적인 사용 사례를 설명하십시오
CSS의 수직-정체 속성은 인라인 또는 테이블 세포 요소를 세로로 정렬합니다. 1. 기준선, 중간, 슈퍼 및 서브와 같은 값을 사용하여 텍스트 라인 내에서 이미지 또는 양식 입력과 같은 요소를 조정합니다. 2. 표 셀에서, 그것은 시뮬레이션 된 테이블 레이아웃에 종종 사용되는 상단, 중간 또는 하단 값과의 컨텐츠 정렬을 제어합니다. 3. 양식 요소를 사용하면 수직 균형 적용 : 중간은 브라우저 전체에 일관된 모양을 위해 검사 상자 또는 버튼을 레이블로 정렬하는 데 도움이됩니다.
CSS의 vertical-align 속성은 요소가 서로에 대해 수직으로 정렬되는 방법을 제어합니다. 일반적으로 텍스트 내부의 이미지 나 테이블 내 셀과 같이 인라인 또는 테이블 셀 요소의 위치를 조정하는 데 사용됩니다. 단순 해 보이지만 종종 text-align 에 대한 수직 상대처럼 행동하지 않기 때문에 개발자를 혼란스럽게합니다.
인라인 요소와 vertical-align 작동하는 방법
vertical-align 의 가장 일반적인 사용 중 하나는 이미지, 아이콘 또는 텍스트 라인 내에서 형태 입력과 같은 인라인 요소를 정렬하는 것입니다.
- 기본값은
baseline이며 요소의 하단을 상위 텍스트의 기준선과 정렬합니다. - 이미지가 한 줄 (슈퍼 스크립트와 같은) 내에서 더 높은 곳에 앉기를 원한다면
vertical-align: super사용할 수 있습니다. - 반대로, 첨자 스타일 정렬의 경우,
vertical-align: sub잘 작동합니다.
예를 들어:
<p> 이것은 <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/175348653671022.jpeg" class="lazy" src = "icon.png"style = "vertical-align : middle;" alt="'수직 정류'속성과 일반적인 사용 사례를 설명하십시오" > 인라인 이미지를 가진 텍스트입니다. </p>
vertical-align: middle 이미지를 주변 텍스트와 수직으로 중앙으로 중앙에 돕습니다.
명심하십시오 : vertical-align 인라인 및 테이블 셀 요소에만 영향을 미칩니다. 기본적으로 <div> 와 같은 블록 레벨 요소에서는 아무것도하지 않습니다.
테이블 셀 내부에서 내용을 정렬합니다
테이블 레이아웃 (또는 테이블 셀로 스타일링 된 요소)으로 작업 할 때 vertical-align 셀 내에 컨텐츠가 어떻게 배치되는지 제어하는 데 특히 유용 해집니다.
- 기본적으로, 테이블 셀의 내용은 상단에 정렬됩니다 (
vertical-align: top). - 셀 내부의 텍스트 나 요소를 수직으로 중심으로 원하시면
vertical-align: middle사용하십시오. - 하단 정렬의 경우
vertical-align: bottom이 이동합니다.
CSS를 사용하여 display: table 및 display: table-cell 사용하여 테이블 레이아웃을 시뮬레이션 할 때도 적용됩니다.
예:
<div style = "디스플레이 : 테이블; 높이 : 100px; 너비 : 200px;">
<div style = "디스플레이 : 테이블 셀; 수직-정렬 : 중간;">
수직 중앙 내용
</div>
</div>이 기술은 종종 구형 레이아웃이나 Flexbox 또는 그리드없이 수직 센터링이 필요한 반응 형 구성 요소를 구축 할 때 종종 사용됩니다.
형태 요소와 vertical-align 사용합니다
<input> , <select> 및 <button> 과 같은 양식 컨트롤은 레이블 또는 기타 인라인 컨텐츠 옆에 배치되면 잘못 정렬 된 것처럼 보일 수 있습니다.
-
vertical-align: middle요소를 사용하면 주변 텍스트 나 아이콘과 더 잘 맞출 수 있습니다. - 브라우저 기본 스타일에 따라 여전히 라인 높이 또는 패딩을 조정해야 할 수도 있습니다.
예를 들어:
<라벨> <input type = "checkbox"style = "vertical-align : middle;"> 확인을 확인하십시오 </레이블>
이렇게하면 확인란이 너무 높거나 낮게 보이지 않고 레이블 텍스트와 잘 어울립니다.
요약
vertical-align 속성은 유용하지만 종종 오해가됩니다. 인라인 요소 및 테이블 셀에 가장 적합하므로 텍스트를 이미지와 정렬, 테이블 셀의 내용 중심 또는 미세 조정 형태 요소에 적합합니다.
범용 수직 센터링 도구가 아닙니다. 블록 레벨 컨테이너의 전체 수직 센터링을 위해 Flexbox 또는 그리드를 대신 사용하려고합니다.
그러나 이러한 작은 인라인 조정의 경우 vertical-align 작업에 적합한 도구입니다.
위 내용은 '수직 정류'속성과 일반적인 사용 사례를 설명하십시오의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
핫 AI 도구
Undress AI Tool
무료로 이미지를 벗다
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Clothoff.io
AI 옷 제거제
Video Face Swap
완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!
인기 기사
뜨거운 도구
메모장++7.3.1
사용하기 쉬운 무료 코드 편집기
SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.
스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경
드림위버 CS6
시각적 웹 개발 도구
SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)
CSS에서 VW 및 VH 장치를 사용하는 방법
Aug 07, 2025 pm 11:44 PM
VW 및 VH 장치는 요소 크기를 뷰포트 너비 및 높이와 연관시킴으로써 반응 형 디자인을 달성합니다. 1VW는 뷰포트 너비의 1%와 같고 1VH는 뷰포트 높이의 1%와 같습니다. 전체 스크린 영역, 반응 형 글꼴 및 탄성 간격에서 일반적으로 사용됩니다. 1. 모바일 브라우저 주소 막대의 영향을 피하기 위해 전체 화면 영역에서 100VH 이상 100DVH를 사용하십시오. 2. 반응 형 글꼴은 5VW로 제한 될 수 있으며 클램프 (1.5REM, 3VW, 3REM)와 결합하여 최소 및 최대 크기를 제한 할 수 있습니다. 3. 너비와 같은 탄성 간격 : 80VW, 마진 : 5VHAUTO, 패딩 : 2VH3VW, 레이아웃을 적응할 수있게 할 수 있습니다. 모바일 장치 호환성, 접근성 및 고정 너비 콘텐츠 충돌에주의를 기울이며 먼저 DVH 사용에 우선 순위를 부여하는 것이 좋습니다.
가상 통화 거래 앱은 무엇입니까? _ 2025 년 상위 10 개 권장 공식 가상 통화 거래 앱
Aug 08, 2025 pm 06:42 PM
1. Binance는 엄청난 거래량과 풍부한 거래 쌍으로 유명합니다. 다양한 거래 모델과 완벽한 생태계를 제공합니다. 또한 Safu Funds 및 여러 보안 기술을 통해 사용자 자산의 보안을 보장하고 준수하는 운영에 큰 중요성을 부여합니다. 2. OKX OUYI는 광범위한 디지털 자산 거래 서비스 및 통합 거래 계정 모델을 제공하고 Web3 분야를 적극적으로 배포하며 엄격한 위험 관리 및 사용자 교육을 통해 거래 보안 및 경험을 향상시킵니다. 3. Gate.io Sesame은 문을 열고 통화 속도가 우수하고 풍부한 통화를 가지고 있으며, 다양한 거래 도구와 부가가치 서비스를 제공하며, 여러 보안 검증 메커니즘을 채택하고 사용자 신뢰를 향상시키기 위해 자산 준비금의 투명성을 준수합니다. 4. Huobi는 강력한 트랜잭션 깊이 및
CSS로 수직선을 만드는 방법
Aug 11, 2025 pm 12:49 PM
테두리가있는 div를 사용하여 세로 선을 신속하게 만들고 왼쪽과 높이를 설정하여 스타일과 높이를 정의하십시오. 2. 사용 :: pseudo-elements 후에 :: 추가 HTML 태그없이 수직선을 추가하여 장식적인 분리에 적합합니다. 3. Flexbox 레이아웃에서 분배기 클래스의 너비와 배경을 설정함으로써 탄성 컨테이너 사이의 적응 형 수직 분배기를 달성 할 수 있습니다. 4. CSSGRID에서는 수직 라인을 독립적 인 열 (예 : Autowidth 열)으로 그리드 레이아웃에 삽입하여 반응 형 설계에 적합합니다. 구조가 간단하고 유지하기 쉬운 지 확인하기 위해 특정 레이아웃 요구에 따라 가장 적절한 방법을 선택해야합니다.
CSS에서 필터 속성을 사용하는 방법
Aug 11, 2025 pm 05:29 PM
thecssfilterpropertyallowsualeffects likelurslikes blike, brightness, andgrayscaletobeapplieddirectlyTohtmlements.1) usethesyntaxfilter : filter-function (value) toApplyEffects.2) combinemultiplefilterswithspaceseparation, blur (2px) (70%)
CSS 선택기를 효과적으로 사용하는 방법
Aug 11, 2025 am 11:12 AM
CSS 선택기를 사용하는 경우, 과도한 제한을 피하기 위해 먼저 사용하는 저 선택기를 사용해야합니다. 1. 특이성 수준을 이해하고 유형, 클래스 및 ID 순서대로 합리적으로 사용하십시오. 2. 다목적 클래스 이름을 사용하여 재사용 가능성과 유지 보수성을 향상시킵니다. 3. 성능 문제를 피하기 위해 속성 및 의사 클래스 선택기를 사용하십시오. 4. 선택기를 짧고 명확한 범위를 유지하십시오. 5. 구조적 명확성을 향상시키기 위해 BEM 및 기타 명명 사양을 사용하십시오. 6. 태그 선택기의 남용을 피하고 Nth-Child를 피하고 스타일을 오랫동안 제어 할 수 있도록 도구 클래스 또는 모듈 식 CSS를 사용하는 데 우선 순위를 부여하십시오.
CSS 믹스 블렌드 모드 예제
Aug 08, 2025 pm 12:59 PM
믹스 블렌드 모드 속성은 요소 컨텐츠 및 배경의 믹싱 효과를 제어하는 데 사용됩니다. 1. 곱하기 텍스트와 배경 이미지의 겹치는 것을 달성 할 수 있습니다. 2. 스크린은 이미지를 밝게하고 어두운 배경에 적합합니다. 3. 오버레이는 대비를 향상시켜 곱하기와 화면 기능을 결합합니다. 4. 차이는 강력한 대비를 만듭니다. 이는 창조적 인 디자인에 적합합니다. 요소가 겹쳐지고 올바른 Z- 인덱스 스태킹 순서를 보장하고 격리와 결합해야합니다. 분리 물, 혼합 범위는 제한 될 수 있으며 색상과 모드를 조정하여 풍부한 시각적 효과를 달성 할 수 있습니다.
CSS에서 목록 스타일을 변경하는 방법
Aug 17, 2025 am 10:04 AM
CSS 목록 스타일을 변경하려면 먼저 목록 스타일 유형을 사용하여 총알 또는 번호 스타일을 변경하십시오. 1. 목록 스타일 유형을 사용하여 UL의 총알을 디스크, 원 또는 정사각형으로 설정하고 OL의 수는 소수점, 하부 알파, 어퍼 알파, 로마 또는 상단 로마입니다. 2. 목록 스타일로 태그를 완전히 제거하십시오. 3. 목록 스타일 이미지 : url ( 'bullet.png')을 사용하여 사용자 정의 이미지로 바꿉니다. 4. 목록 스타일 위치 : in
CSS의 라인 파괴를 방지하는 방법
Aug 08, 2025 pm 05:14 PM
WHITE-SPACE : NOWRAPTOPREVENTTEXTFROMINGONTOMULTIPLELENSERLINES, 2. APPLISPROPERTYTOINLINE, Inline-BLOCK, ORFLEXITEMS, WHERFLEX-WRAP : NOWRAPPREVENTITEMWRAPPENDANDWHITE-SPACE : NOWRAPPREVENTINTINALTEXTWRAPPE;
