CSS 중심 맞추기
수평 중간은 우리가 개발하는 과정에서 만나는 매우 흔한 구조이다. 다음은 내가 간단하게 흔한 방법을 말하겠다.
가장 간단하게 수평 가운데를 차지하는 방식을 실현하려면 목표 원소는 반드시 너비가 있어야 합니다. 이 방법은 블록급 원소(block)에만 유효합니다.
text-align
可以实现块级元素内部的行内元素水平居中，注意，此方法只对 行内元素(inline)、行内块(inline-block)、行内表(inline-table)、inline-flex 元素 水平居中都有效
当有多个行内元素相邻时，也能生效
position 포지셔닝
아래 코드를 보면 먼저 부원소가 한 줄
position: relative을 더해야 하고 그 다음에 목표 원소의 폭을 알아야 한다. 모르면 js동태로 계산해야 한다.垂直居中
水平居中是我们在开发的过程中，遇见的非常非常常见的布局，下面 我就简单来说一说常见的方法
- line-height
- vertical-align
- flex
- table-cell
- position 定位
line-height
此方法一般而言，是是用于文本垂直居中的，对行内元素，块级元素无效
flex
利用弹性布局flex，通过 align-items 设置弹性盒子元素在纵轴方向上的对齐方式
vertical-align
vertical-align 이 속성은 인라인 요소의 베이스라인을 해당 요소의 인라인 베이스라인에 수직으로 정렬하도록 정의합니다.inline-block이어야 하고 위조원소의 높이는 100%여야 한다)display: table-cell과 함께 사용하는데 주로 부원소의 vertical-align와 table-cell
table-cell
만나다
vertical-alignposition 포지셔닝아래 코드를 보면 먼저 부원소가 한 줄
position: relative을 더해야 하고 그 다음에 목표 원소의 높이를 알아야 한다. 모르면 js동태로 계산해야 한다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
장치 너비가 특정 너비보다 크고 특정 너비보다 작을 때 웹 페이지 CSS 스타일을 변경하는 방법은 무엇입니까?장치 너비가 특정 너비보다 크고 특정 너비보다 작을 때 웹 페이지 CSS 스타일을 변경하려면 @media의 미디어 쿼리 구문을 사용한 다음 구문을 작성하여 스타일의 최소 너비를 정의해야 합니다. 적용된 후 and라는...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
