CSS 수직 정렬이 작동하지 않는 이유와 해결 방법-CSS 튜토리얼-php.cn

CSS 수직 정렬이 작동하지 않는 이유와 해결 방법

不言

풀어 주다： 2018-11-23 14:20:02

원래의

3709명이 탐색했습니다.

verticla-align은 인라인 요소의 수직 위치를 조정하는 데 사용되지만 때로는 작동하지 않습니다. 이 기사에서는 CSS 수직 정렬이 작동하지 않는 이유와 해결 방법을 공유합니다.

수직정렬이 유효하지 않은 이유를 먼저 분석해보자

수직정렬을 속성으로 사용하면 이런 문제를 겪으시는 분들이 많을 것 같아요 수직 위치를 정렬하려면 어떤 이유로 전혀 작동하지 않습니다!

사실 수직 정렬은 "인라인 요소"와 "테이블 셀"에만 사용할 수 있습니다.

수직 정렬 사용 방법

"인라인 요소" 또는 "테이블 셀"에서 정렬할 위치를 설명하세요.

내부 요소에 적용하는 경우 "텍스트의 기본 줄을 변경하고 싶습니다". 텍스트의 기준선이 기본 위치입니다.

CSS 수직 정렬이 작동하지 않는 이유와 해결 방법

이 위치는 올리거나 내릴 수 있습니다.

기본적으로 상단, 하단, 중간이 있으며 픽셀과 % 단위의 숫자로도 지정할 수 있습니다.

표 셀에 해당하는 경우 "세로 방향으로 정렬한 경우"입니다.

구체적인 예를 살펴보겠습니다.

예를 들어 수직 정렬을 사용하여 수직 중앙 정렬을 구현하려는 경우 다음 코드를 참조하세요.

먼저 이런 상자를 준비합니다

HTML

<div class ="box-wrap"> 
  <div class ="box"> 
    <p>文字内容</p> 
  </div> 
  </div>

로그인 후 복사

CSS

.box{
  background-color: #66b6d5;
  width: 300px;
  height: 200px;
}
p{
  color: #fff;
}

로그인 후 복사

효과는 다음과 같습니다 다음:# 🎜🎜#

CSS 수직 정렬이 작동하지 않는 이유와 해결 방법

그런 다음 디스플레이: 테이블 - 셀 및 수직 - 정렬: 중간;

.box{
  display: table-cell;
  vertical-align: middle;
  background-color: #66b6d5;
  width: 300px;
  height: 200px;
}
p{
  color: #fff;
}

로그인 후 복사

효과는 다음과 같습니다: 수직 센터링이 달성됩니다

CSS 수직 정렬이 작동하지 않는 이유와 해결 방법

여기서 수직을 달성하려면 방향의 위치를 지정하려면 높이가 있는 테이블이 필요합니다.

높이가 상위 요소에 따라 달라지도록 하려면 상위 요소를 display: table과 hight로 지정해야 합니다.

세로로 정렬해도 위쪽과 아래쪽의 차이는 같습니다.

코드는 다음과 같습니다:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
    .box-wrapper{
  display: table;
  height: 200px;
}
.box{
  width: 300px;
  background-color: #66b6d5;
  display: table-cell;
  border: 1px #fff solid;
}
.box.middle{
  vertical-align: middle;
}
.box.top{
  vertical-align: top;
}
.box.bottom{
  vertical-align: bottom;
}
p{
  color: #fff;
}
 </style>
  </head>
  <body>
<div class="box-wrapper">
  <div class="box middle">
     <p>文字内容</p>
  </div>
  <div class="box top">
     <p>文字内容</p>
  </div>
  <div class="box bottom">
     <p>文字内容</p>
  </div>
</div>
  </body>
</html>

로그인 후 복사

효과는 다음과 같습니다:

CSS 수직 정렬이 작동하지 않는 이유와 해결 방법