Tailwind CSS에서 div가 상위 div의 나머지 높이를 채우도록 만듭니다.
P粉696605833
2023-08-29 10:05:04
<p>킹을 카드 중앙에 배치하고 싶은데 어떻게 해야 하나요?
두 번째 div가 문자 K</p>의 높이이기 때문에 작동하지 않는 두 번째 div에 items-center를 넣으려고 했습니다.
<pre class="brush:php;toolbar:false;"><div class="bg-orange-200 w-48 h-48 Shadow-md rounded-md hover:shadow-lg mx-10 my -10>
<div class="flex justify-end p-2">
<svg>
</svg>
</div>
<div class="bg-slate-200 flex justify-center items-center text-5xlfont-bold">
케이
</div>
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
귀하의 질문이 분명 불분명합니다. 귀하의 작업을 완료할 수 있는 다양한 가능성을 제공하겠습니다.
으아악으아악
으아악
으아악
으아악
이러한 유형의 레이아웃은 그리드를 사용하면 더 예측하기 쉽습니다. Flex는 사용 가능한 공간을 채우려고 하기 때문에 그리드는 그렇지 않습니다.
두 가지 예를 들었습니다. 하나는 아이콘에 관계없이 완벽하게 중앙에 배치되었고 다른 하나는 아이콘의 위치와 크기를 고려했습니다.
https://play.tailwindcss.com/6M290nY1NT
으아악