너비와 높이가 고정된 div 내에서 수직 센터링의 CSS 구현에 대한 자세한 설명 공유 예.

이 글에서는 고정된 너비와 높이 p 내에서 CSS 수직 센터링의 자세한 예, 즉 p를 기준으로 p 내부의 요소를 수직으로 센터링하는 방법을 주로 소개합니다.

요구사항 케이스

케이스는 외부 p의 높이와 너비는 고정되어 있지만 내부 내용은 고정되어 있지 않습니다. 많은 친구들이 하는 일은 머리 부분에 패딩이나 여백을 추가하여 내부 내용이 중앙에 있는 것처럼 보이도록 하는 것입니다. 그러나 내용이 변경되면 머리 부분의 고정된 패딩이나 여백은 절대 변하지 않습니다. 결과적으로 수직 방향이 중앙에 위치하지 않게 됩니다!

우리는 다음 p

<p class="outer"><p class="inner">haorooms内部内容</p></p>

스타일이

.outer{text-align:center;vertical-align: middle;width:200px;height:350px;}

vertical-align: middle이 그렇지 않다는 것을 알고 있습니다. 문제 위에서 언급한 것처럼 많은 친구들이 .inner를 사용하여 소란을 피우거나 여백을 추가하는 등의 작업을 하고 있습니다! 그렇다면 이 상황에 대한 더 나은 해결책이 있습니까?

해결책

아이디어: cssHack을 추가하고, cssHack의 줄 높이를 외부 p의 높이와 동일하게 설정하고, 수직 정렬:중간을 사용할 수 있습니다. !

p는

<p class="outer">   
    <p class="inner">haorooms内部内容</p><p class="v">cssHack</p>   
</p>

스타일은 다음과 같습니다. p 달성!

위 내용은 너비와 높이가 고정된 div 내에서 수직 센터링의 CSS 구현에 대한 자세한 설명 공유 예.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!