다음 편집기에서는 CSS를 사용하여 수평 및 수직 중앙 정렬을 동시에 달성하기 위한 5가지 아이디어에 대한 간략한 분석을 제공합니다. 편집자는 꽤 좋다고 생각합니다. 이제 공유하여 참고자료로 삼겠습니다.
수평 중심과 수직 중심이 별도로 소개됩니다. 5가지 아이디어를 동시에 도입
아이디어 1: text-align + line-height 한 줄 텍스트의 가로 및 세로 중앙 정렬
<style>
.test{
text-align: center;
line-height: 100px;
}
</style> XML/HTML 코드 클립보드에 콘텐츠 복사
1a5fa2bcab2a55775d85221bbd7ca75c 테스트 텍스트 a7447e9e15348813b597b50fafc8734e
아이디어 2 : text-align + vertical-align
【1】상위 요소에 text-align, Vertical-align을 설정하고 상위 요소를 테이블로 설정 -cell 요소와 하위 요소를 inline-block 요소로
[참고] IE7 브라우저와 호환되는 경우 테이블 셀 사용 효과를 얻으려면 구조를 f5d188ed2c074f8b944552db028f98a1 display :inline;zoom:1; 인라인 달성- 블록의 효과
<style>
.parent{
display: table-cell;
text-align: center;
vertical-align: middle;
}
.child{
display: inline-block;
}
</style> <p class="parent" style="background-color: gray; width:200px; height:100px;">
<p class="child" style="background-color: lightblue;">测试文字</p>
</p>
[2] 하위 요소가 이미지인 경우 테이블 -cell은 사용할 수 없지만 상위 요소는 높이 대신 행 높이를 사용하고 글꼴 크기는 0으로 설정됩니다. 하위 요소 자체는 Vertical-align:middle
<style>
.parent{
text-align: center;
line-height: 100px;
font-size: 0;
}
.child{
vertical-align: middle;
}
</style> <p class="parent" style="background-color: gray; width:200px; ">
<img class="child" src="http://sandbox.runjs.cn/uploads/rs/26/ddzmgynp/img1.gif" width="50%" alt="test">
</p>
세 가지 아이디어: 여백 + 수직 정렬
상위 요소에서 수직 정렬을 설정하려는 경우, 블록 요소 내용을 수평 중앙에 맞추려면 margin:0 자동을 테이블 셀 요소로 설정해야 합니다. 너비를 확장하려면 테이블 요소로 설정해야 합니다. 테이블 요소는 셀이 테이블을 중첩할 수 있는 것처럼 tabel-cell 요소 내에 중첩될 수 있습니다.
[참고] IE7 브라우저와 호환되는 경우 구조를
<style>
.parent{
display:table-cell;
vertical-align: middle;
}
.child{
display: table;
margin: 0 auto;
}
</style>
<p class="parent" style="background-color: lightgray; width:200px; height:100px; ">
<p class="child" style="background-color: lightblue;">测试文字</p>
</p>
아이디어 4: 절대 사용
【1】절대 위치 요소의 박스 모델 기능을 사용하고 오프셋 속성 을 기준으로 margin:auto
<style>
.parent{
position: relative;
}
.child{
position: absolute;
top: 0;
left: 0;
rightright: 0;
bottombottom: 0;
height: 50px;
width: 80px;
margin: auto;
}
</style> 를 결정된 값으로 설정합니다. 🎜>
<p class="parent" style="background-color: lightgray; width:200px; height:100px; ">
<p class="child" style="background-color: lightblue;">测试文字</p>
</p>
【2】절대 위치에 있는 요소의 오프셋 속성과 번역()
함수 자체 오프셋을 사용하여 수준에 도달 세로 센터링 효과 [참고] IE9 브라우저는
<style>
.parent{
position: relative;
}
.child{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
</style> rrree
를 지원하지 않습니다.[3] 너비와 높이가 아래의 하위 요소는 알려져 있습니다. 음수 여백 값을 사용하여 수평 및 수직 중앙 정렬 효과를 얻을 수 있습니다.
<p class="parent" style="background-color: lightgray; width:200px; height:100px; ">
<p class="child" style="background-color: lightblue;">测试文字</p>
</p> <style>
.parent{
position: relative;
}
.child{
position: absolute;
top: 50%;
left: 50%;
width: 80px;
height: 60px;
margin-left: -40px;
margin-top: -30px;
}
</style>
아이디어 5: flex 사용 [참고] IE9 브라우저는
[1] margin:auto
<p class="parent" style="background-color: lightgray; width:200px; height:100px; ">
<p class="child" style="background-color: lightblue;">测试文字</p>
</p> rrree
[2] 확장 가능한 프로젝트의 경우 확장 가능한 컨테이너에서 주축 정렬 justify-content 및 교차 축 정렬 align-items를 사용합니다.
<style>
.parent{
display: flex;
}
.child{
margin: auto;
}
</style>
<p class="parent" style="background-color: lightgray; width:200px; height:100px; ">
<p class="child" style="background-color: lightblue;">测试文字</p>
</p>
위 기사에 대한 간략한 분석 CSS로 수평 및 수직 센터링을 동시에 달성하기 위한 5가지 아이디어는 모두 편집자가 공유한 내용이므로 참고가 되셨으면 좋겠습니다. PHP 중국어 웹사이트.
위 내용은 CSS가 수평 및 수직 센터링을 동시에 달성하기 위한 5가지 아이디어에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명: 본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.