CSS/CS3 가운데 맞춤(수평&수직)
인라인 요소를 속성 블록(display:block) 요소에 배치한 다음 부모 요소 속성 가운데를 설정합니다.
.test {
text-align:center;}
2, 수평 가운데: 블록 요소
외부 여백 설정
.test {
margin: 100px auto;}
3, 수평 가운데: 여러 블록 요소
블록 요소 속성(display:inline-block)을 설정하고 부모 요소 속성 가운데를 설정합니다.
.test {
text-align:center;}
4, 수평 가운데: 여러 블록 요소 (flexbox 레이아웃 실현)
블록 요소의 부모 요소 속성 display:flex와justify-content:center를 다음과 같이 설정합니다.
.test {
text-align:center;}
5, 수직 가운데: 단일행의 인라인 요소
height 및 line-height 속성 설정
.test {
height: 100px;
line-height:100px; }
6, 세로 가운데: 여러 줄의 인라인 요소
가운데에 있는 부모 요소에 디스플레이:table-cell과vertical-align:middle 속성을 설정합니다
.test {
background: red;
width: 200px;
height: 200px;
/* */
display: table-cell;
vertical-align:middle;}
7, 수직 가운데: 알려진 높이의 블록 요소
가운데에 놓을 요소에 다음과 같은 속성을 설정합니다
.test {
top: 50%;
margin-top: -50px; /* margin-top */
position: absolute;
padding:0;}
8, 수평 수직 가운데: 높이와 너비를 아는 요소
가운데에 놓을 요소에 다음과 같은 속성을 설정합니다
(1).test {
position: absolute;
margin:auto;
left:0;
top:0;
right:0;
bottom:0;}(2) .test{
position: absolute;
top: 50%;
left: 50%;
margin-top: -75px; /* margin-left / margin-top */
margin-left: -75px;}
9, 수평 세로 가운데: 알 수 없는 높이 및 너비 요소
가운데에 놓을 요소에 다음과 같은 속성을 설정합니다
.test {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%); /* css3 transform */}
10, 가로 세로 가운데: flex 사용 가능
다음과 같은 등록 정보를 설정합니다.
.test {
display: flex;
justify-content:center;
align-items: center;
/* */
background: #AAA;
height: 300px;}
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
[HTML5] EmmetHTML5에서는 셀렉터를 이용해 여러 요소를 한 줄로 작성할 수 있다. 분명 이런 문법 명칭이 있을 텐데, 찾지 못해서 뭐라고 칭해야 하는지 모르겠다. 누군가가 알려주셨으면 좋겠다. ㅠㅠ 22.04.07 18:42 ...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
