집 > 기사 > 웹 프론트엔드 > 수직 센터링을 달성하기 위해 일반적으로 사용되는 4가지 CSS 방법

수직 센터링을 달성하기 위해 일반적으로 사용되는 4가지 CSS 방법

php中世界最好的语言원래의: 2018-03-21 13:20:402718검색

이번에는 수직 센터링을 위해 일반적으로 사용되는 4가지 CSS 방법을 소개하겠습니다. CSS를 사용하여 수직 센터링을 구현할 때 주의할 점은 무엇인가요?

line-height한 줄의 텍스트를 세로로 가운데 맞추려면한 줄의 텍스트를 세로로 가운데 맞추려면 높이와 줄 높이를 같은 값으로 설정해야 한다고 생각했는데, 거기에 실제로는 높이를 설정할 필요가 없습니다. 실제로 텍스트 자체는 한 줄의 중앙에 표시됩니다. 높이를 설정하지 않으면 행 높이가 높이를 확장합니다.

<style>
.test{
    line-height: 50px;
    background-color: lightblue;
}    
</style>
<p>测试文字</p>

설정

vertical-align:가운데로 수직 중심 맞추기【1】상위 요소의 표시를 table-cell

으로 설정합니다. table-cell 요소 align:middle은 모든 하위 요소를 세로로 가운데에 배치할 수 있습니다. 이는 테이블의 셀 수직 중앙 정렬과 유사합니다

[참고] IE7 브라우저에서 지원하는 경우 테이블 구조로 변경할 수 있습니다

[참고] table-cell로 설정된 p는 부동 또는 사용할 수 없습니다.

절대 위치 지정

, 부동 또는 절대 위치 지정으로 인해 요소가 블록 수준 요소 특성을 가지게 되어 테이블 셀 요소의 수직 정렬 기능이 손실되기 때문입니다.

플로팅 또는 절대 위치 처리가 필요한 경우 외부에 또 다른 p 레이어를 배치해야 합니다.

<style>
.parent{
  display: table-cell;
  vertical-align: middle;
}
</style>
<p>
    </p><p>我是有点长的有点长的有点长的有点长的测试文字</p>

수직 센터링을 달성하기 위해 일반적으로 사용되는 4가지 CSS 방법 【2】자식 요소가 이미지인 경우 높이 대신 상위 요소의 행 높이를 설정하고, 상위 요소의 글꼴 크기를 0으로 설정합니다.

vertical-align: 중간에 대한 설명은 요소의 중간점이 상위 요소의 기준선에 상위 요소의 문자 X 높이의 1/2을 더한 값과 정렬된다는 것입니다. 문자 X가 전각 상자에서 세로 중앙에 있지 않고 각 글꼴에서 문자 X의 위쪽 및 아래쪽 위치가 일치하지 않기 때문입니다.

그래서 글꼴 크기가 클수록 차이가 더 확연해집니다. 글꼴 크기가 0이면 문자 X의 글꼴 크기를 0으로 설정하는 것과 같으므로 완전한 수직 중앙 정렬이 가능합니다.

<style>
.parent{
  line-height: 100px;
  font-size: 0;
}
.child{
  vertical-align: middle;
}
</style>
<p>
  <img  alt="수직 센터링을 달성하기 위해 일반적으로 사용되는 4가지 CSS 방법" >  
</p>

수직 센터링을 달성하기 위해 일반적으로 사용되는 4가지 CSS 방법 【3】새 요소를 추가하여 수직 센터링 효과 달성

새 요소의 높이를 상위 요소의 높이로, 너비를 0으로 설정하고, 수직 센터링도 수직으로 설정- align:middle의 인라인 블록 요소. 두 요소 사이의 공간이 구문 분석되므로 상위 수준에서 글꼴 크기:0을 설정한 다음 구조적 요구 사항이 엄격하지 않은 경우 글꼴 크기를 하위 수준에서 필요한 값으로 설정해야 합니다. 한 줄에 두 요소가 있으면 글꼴 크기:0을 설정할 필요가 없습니다.

<style>
.parent{
  height: 100px;
  font-size: 0;
}
.child{
  display: inline-block;
  font-size: 20px;
  vertical-align: middle;
}
.childSbling{
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}
</style>
<p>
  </p><p>我是比较长的比较长的多行文字</p>
  <i></i>

세 가지 아이디어: 절대 위치 지정을 통해 수직 센터링 달성

[1] 하위 요소의 높이가 불확실한 경우 top50%와 TranslateY(-50%)를 사용하여 센터링 효과를 얻습니다.

번역 기능의 백분율은 자체 높이를 기준으로 하므로 top:50%와 TranslateY(-50%)를 결합하면 센터링 효과를 얻을 수 있습니다.

[참고] IE9 브라우저는 이를 지원하지 않습니다.

[참고] 하위 요소의 높이를 알고 있는 경우 번역() 함수는 음수 높이 값인 margin-top으로 대체될 수도 있습니다.

<style>
.parent{
  position:relative;
}
.child{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
</style>
<p>
  </p><p>测试文字</p>

【2】자식 요소의 높이가 고정된 경우 절대 위치 지정 상자 모델 속성을 결합하여 센터링 효과를 얻습니다.

<style>
.parent{
  position: relative;
}
.child{
 position: absolute;
 top: 0;
 bottom: 0;
 margin: auto 0;
 height: 50px;
}
</style>
<p>
  </p><p>测试文字</p>

수평 중앙 정렬에서 바깥쪽 요소의 레이어는 레이어 p로 설정되고 절대값으로 설정되며 요소의 음수 여백-왼쪽 또는 상대 음수 왼쪽 속성을 설정하여 수평 중심 효과를 얻습니다. 그러나 마진은 포함 블록의 너비에 상대적이므로 margin-top:-50%는 높이의 -50% 대신 너비를 가져오므로 포함 블록의 높이인 상대 백분율 값에는 적합하지 않습니다. is auto 이 경우 크롬, 사파리, IE8+ 브라우저는 요소의 상위 백분율 값 설정을 지원하지 않으므로 불가능합니다.

아이디어 4:

플렉스 박스 모델플렉스를 사용하여 수직 센터링을 달성하세요.

[注意] IE9-浏览器不支持

【1】在伸缩容器上设置侧轴对齐方式align-items: center

<style>
.parent{
  display: flex;
  align-items: center;
}
</style>
<p>
    </p><p>测试文字</p>

【2】在伸缩项目上设置margin: auto 0

<style>
.parent{
  display: flex;
}
.child{
  margin: auto 0;
}
</style>
<p>
    </p><p>测试文字</p>

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

수직 센터링을 달성하기 위해 일반적으로 사용되는 4가지 CSS 방법

관련 기사