수직 가운데 맞춤법
display:table-cell, 동시에 설정vertial-align: middleflex 레이아웃, 설정align-item：centerbottom:0,top:0 및 설정margin:autotop:50%, margin-top 값은 높이의 절반인 음수line-height은height값line-height 및 height 값.vertical {
height: 100px;
line-height: 100px;
}
.container {
position: relative;
}
.vertical {
height: 300px; /* */
position: absolute;
top:50%; /* 50%*/
margin-top: -150px; /* */
}
IE67호환되지 않음, 부급overflow：hidden실효.container {
display: table;
}
.content {
display: table-cell;
vertical-align: middle;
}
inline-block, 설정vertical-alignIE67 호환 불가.container {
height: 100%;/* ， */
}
.extra .vertical{
display: inline-block; /* */
vertical-align: middle; /* */
}
.extra {
height: 100%; /* 100%*/
}
CSS3 위치 이동.vertical {
position: absolute;
top:50%; /* 50%*/
transform:translateY(-50%, -50%);
}
CSS3탄성 박스 모형.container {
display:flex;
justify-content: center; /* */
align-items: center; /* */
}
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
【Grunt】 복수의 CSS, JavaScript 파일을 minfy한다여러 CSS, JavaScript 파일을 Grunt를 사용하여 단번에 각각 하나의 파일로 minfy합니다. ① Gruntfile 작성 ② package.json 쓰기 ④ html CSS, JavaScript 지정 부...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
