i am trying to show text under image for responsive design. right now it is showing behind icon. how i can show text below icon.
<link
rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
/>
<div class="flex flex-wrap mt-4 border-2 border-gray-500 p-8 m-auto w-1/4 items-center justify-center">
<div class=" absolute fas fa-book-reader text-6xl text-gray-600"></div>
<div class=" text-base"> Caring Enviroment</div>
</div>
CodePudding user response:
You need to remove absolute class
<link
rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
/>
<div class="flex flex-wrap mt-4 border-2 border-gray-500 p-8 m-auto w-1/4 items-center justify-center">
<div class="fas fa-book-reader text-6xl text-gray-600"></div>
<div class=" text-base text-center"> Caring Enviroment</div>
</div>
CodePudding user response:
Remove absolute or relpace absulte with relative. On this way you can position (top-10 etc.) the box if you want.