I am trying to position icon to the left side of a Link and have the text centered at the same time.
<div className="max-w-screen-2xl mx-auto sm:px-6 lg:px-8">
<Link
href="#"
className="px-6 py-3 mt-2 flex justify-center text-center"
>
<DocumentTextIcon
className="ml-1 mt-1 -mr-1 h-10 w-10"
aria-hidden="true"
/>
<p>
Some random text </p>
</Link>
</div>
With this the icon is in the middle with the text. I can push to the right with margin left but then it is not dynamic. Any idea how I can push the icon to the left and it remains dynamic?
Try this way:
<div class="my-10 flex items-center justify-center bg-gray-100 w-40">
<div class="flex-1">
<span class="mr-auto">icon</span>
</div>
<p>text</p>
<div class="flex-1"></div>
</div>
<div class="my-10 flex items-center justify-center bg-gray-100 w-80">
<div class="flex-1">
<span class="mr-auto">icon</span>
</div>
<p>with long text</p>
<div class="flex-1"></div>
</div>
Demo
Related
I'm struggling with TailwindCSS and I'm a bit lost. I'm trying to create a nav with some elements inside, but I want one of the elements to be centered in the middle of the nav, ignoring the other elements inside. I tried this:
<nav class='py-3 z-50 bg-white border-gray-200 shadow px-2 flex flex-wrap items-center justify-between'>
<div id='1' class='flex flex-row border-red-400 border-2'>
<p>Here goes content more larger</p>
<p> than ocuppies a bit mmore</p>
</div>
<div id='2' class="flex justify-center items-center basis-100 place-content-center border-red-400 border-2">
<p>Content that I want in the center on the nav</p>
</div>
<div id='3' class="border-red-400 border-2">
<p>Other content</p>
</div>
</nav>
<div class="flex items-center justify-center">
<p>This is the center</p>
</div>
With justify-between the space is almost what I want (elements 1 and 2 at start and end), but it puts the same space between elements, and de div with id 2 is not centered regarding the nav
Is it possible to maintain the divs 1 and 2 at the end of the nav but centering the div with id 2 ignoring the other elements?
Any help would be appreciated. Thanks in advance
EDIT
I tried another approach that would be the key, but I don't know if it's the right path. I change flex by grid, doing this
<div>
<nav class='py-3 z-50 bg-white border-gray-200 shadow px-2 flex flex-wrap items-center justify-between'>
<div id='1' class='flex flex-row border-red-400 border-2'>
<p>Here goes content more larger</p>
<p> than ocuppies a bit mmore</p>
</div>
<div id='2' class="place-content-center border-red-400 border-2">
<p>Content that I want in the center on the nav</p>
</div>
<div id='3' class="border-red-400 border-2">
<p>Other content</p>
</div>
</nav>
<div #content class="flex items-center justify-center mb-24">
<p>This is the center</p>
</div>
<nav class='py-3 z-50 bg-white border-gray-200 shadow px-2 grid grid-cols-2 md:grid-cols-3 gap-5 items-center'>
<div id='1' class='flex flex-row border-red-400 border-2'>
<p>Here goes content more larger</p>
<p> than ocuppies a bit mmore</p>
</div>
<div id='2' class="place-self-center hidden md:flex border-red-400 border-2">
<p>Content that I want in the center on the nav</p>
</div>
<div id='3' class="place-self-end border-red-400 border-2">
<p>Other content</p>
</div>
</nav>
</div>
And this is the result:
I assume that you simply want the central component somewhat left as shown in the image below.
so I had added a left margin according to the screen size
<nav class='py-3 z-50 bg-white border-gray-200 shadow px-2 flex flex-wrap items-center justify-between'>
<div id='1' class='flex flex-row border-red-400 border-2'>
<p>Here goes content more larger</p>
<p> than ocuppies a bit mmore</p>
</div>
<div id='2' class="flex justify-center items-center basis-100 place-content-center border-red-400 border-2 md:-ml-32 lg:-ml-72">
<p>Content that I want in the center on the nav</p>
</div>
<div id='3' class="border-red-400 border-2">
<p>Other content</p>
</div>
</nav>
<div class="flex items-center justify-center">
<p>This is the center</p>
</div>
Please find the code here
I have a simple text and image in a row. But the image is not showing in centre to text.
My code
<div class="w-28 flex justify-center items-center align-middle">
<div>
asd
</div>
<div>
<img src="assets/Vector 35.png" class="w-4 align-middle">
</div>
</div>
Preview
Use items-baseline
It is actually centre if you watch carefully.
But for your situation change items-center to items-baseline to get the desired behavior
<div class="relative flex w-28 items-baseline justify-center">
<div class="text-4xl">asd</div>
<div>
<img src="assets/Vector 35.png" class="w-6" />
</div>
</div>
Output using items-center
Output using items-baseline
Just add "absolute" to your text
<div class="w-28 flex justify-center items-center align-middle">
<div class="absolute">
asd
</div>
<div>
<img src="assets/Vector 35.png" class="w-4 align-middle">
</div>
</div>
I am using Flex in tailwind in one my main div container to align the items inside of it horizontal
but somehow the items are of different sizes in the row the image link is below any fixes for it?
i have tried using height utility class but it just messes up the entire page.
[1]: https://i.stack.imgur.com/Yjs51.jpg
HOME
ORDERS
MENU CARD
FAQs
ABOUT
Butter Chicken
If you haven't tried butter chicken, you don't know what you'r missing.
</div>
</div>
</a>
<a href="butterchicken.html">
<div class="max-w-sm rounded overflow-hidden shadow-lg justify-center">
<img class= "w-full" src="images/download (1).jpg" alt="malai-chicken">
<div class="px-6 py-8">
<div class="font-extrabold text-xl pb-3">Malai Chicken</div>
<div>
<p class=" font-serif text-base mb-3">Clean as white and appetizing.</p>
</div>
</div>
</div>
</a>
</a>
<a href="butterchicken.html">
<div class="max-w-sm rounded overflow-hidden shadow-lg justify-center">
<img class= "w-full" src="images/download (2).jpg" alt="Shahi Paneer">
<div class="px-6 py-8">
<div class="font-extrabold text-xl pb-3">Shahi Paneer</div>
<div>
<p class=" font-serif text-base mb-3">First Pick of Royales.</p>
</div>
</div>
</div>
</a>
</div>
I'm using tailwindcss. I have a flexbox container and a login button inside it.
The button looks like it's being stretched.
<nav font-am class="m-6 text-xl">
<div class="flex flex-row justify-between container">
<div>
<img src="./img/Logo.png">
</div>
<div class="flex flex-row">
<img src="./img/AccountLog.png">
<p class="hidden md:flex">My Account</p>
</div>
<div class="flex flex-row">
<img src="./img/love_symbol.png">
<p class="hidden md:flex">My List</p>
</div>
<div class="flex box-border flex-row">
<img src="./img/LockLogo.png">
<button class="bg-darkPink hover:underline text-white font-bold py-2 px-4 rounded-full" role="button">Sign In</button>
</div>
</div>
</nav>
Here is how it looks with the logo:
And the button is displayed normally when I delete the logo:
What should I do to keep the button looks normal when the logo is on. Is the logo taking up too much space or something?
You've set your button as a stretched flex element in a flex row. You can do one of several things to fix it:
Align the row elements to center rather than stretching them. Here, '.self-center` seems to work nicely, though you could do it at the row level also.
Wrap the button in a div. This will make the div the stretched element, and you'll need to center the button vertically with other styles.
Both solutions are shown here.
.bg-darkPink {
background: pink;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" integrity="sha512-wnea99uKIC3TJF7v4eKk4Y+lMz2Mklv18+r4na2Gn1abDRPPOeef95xTzdwGD9e6zXJBteMIhZ1+68QC5byJZw==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<nav font-am class="m-6 text-xl">
<div class="flex flex-row justify-between container">
<div class="flex box-border flex-row">
<img src="https://via.placeholder.com/80">
<button class="bg-darkPink hover:underline text-white_disabled font-bold
py-2 px-4 rounded-full self-center">Flex class</button>
</div>
<div class="flex box-border flex-row">
<img src="https://via.placeholder.com/80">
<div class="flex flex-column items-center">
<button class="bg-darkPink hover:underline text-white_disabled font-bold
py-2 px-4 rounded-full">Flex div</button>
</div>
</div>
</div>
</nav>
You can give the div which is the parent of the link and the button the tailwind classes grow-0 and shrink-0 to prevent it from changing shape. Set items-center to align the lock icon vertically with the button.
Don't let the logo disappear with display:none, do it with opacity:0
I have a section with the following contents:
<section class="flex flex-wrap -mx-2">
<Card
v-for="(course, index) in courses"
:key="index"
:title="course.title"
:professor="course.professor"
:price="course.price"
:excerpt="course.excerpt"
:image="course.image"
:category="course.category"
/>
</section>
A Card looks like this:
<article class="bg-red mt-5 px-2 w-full md:w-1/2 lg:w-1/3 xl:w-1/3 shadow-md rounded bg-white">
<nuxt-link to="/courses/example-course">
<img :src="`/images/${image}`" :alt="title" class="rounded-t w-full">
</nuxt-link>
<div class="p-4">
<header class="flex justify-between">
<section>
<h3 class="text-gray-700">
<nuxt-link to="/courses/example-course" class="hover:text-gray-600" v-text="title"></nuxt-link>
</h3>
<p class="text-gray-600 mt-1" v-text="professor"></p>
</section>
<div v-if="price">
<span class="px-2 py-1 bg-green-200 text-green-500 font-bold rounded">${{ price }}</span>
</div>
</header>
<article class="text-gray-700 mt-2" v-text="excerpt"></article>
</div>
<footer class="border-t border-gray-300 uppercase p-5 flex justify-between">
<span class="text-gray-600 text-xs font-bold self-center" v-text="category"></span>
<a href="#" class="text-gray-600 hover:text-blue-600">
<i v-if="price" class="fa fa-user"></i>
</a>
</footer>
</article>
And the outcome of all this looks like this:
As you can see, the cards are touching each other, despite me following what the Tailwind's docs say on grid spacing. I have tried adding ml-2 on the <article> tags, but that just results in wrapping the element prematurely and leaving out too much space.
What am I doing wrong here and how to add a gap between the cards? Thanks!
The "problem" with margin is that it lives on the outside of the box(model) of your element, e.g. it affects the total width of your card. For example on large screens you want them to be 33.33% wide, but if you add margin on the left/right, the card will have a width of 33.33% + margin which makes the flexbox container wrap after two items because otherwise the total width would be more than 100%. You can solve this by a) setting things to box-sizing: border-box (doesn't help with margin tough!) and b) use padding instead of margin to create the gaps, this usually requires some kind of wrapper around your content that does nothing else than dealing with spacing and sizing, something like this:
<article class="mt-5 px-2 w-full md:w-1/2 lg:w-1/3 xl:w-1/3">
<div class="card bg-red shadow-md rounded bg-white">
<nuxt-link to="/courses/example-course">
<img :src="`/images/${image}`" :alt="title" class="rounded-t w-full">
</nuxt-link>
<div class="p-4">
<header class="flex justify-between">
<section>
<h3 class="text-gray-700">
<nuxt-link to="/courses/example-course" class="hover:text-gray-600" v-text="title"></nuxt-link>
</h3>
<p class="text-gray-600 mt-1" v-text="professor"></p>
</section>
<div v-if="price">
<span class="px-2 py-1 bg-green-200 text-green-500 font-bold rounded">${{ price }}</span>
</div>
</header>
<article class="text-gray-700 mt-2" v-text="excerpt"></article>
</div>
<footer class="border-t border-gray-300 uppercase p-5 flex justify-between">
<span class="text-gray-600 text-xs font-bold self-center" v-text="category"></span>
<a href="#" class="text-gray-600 hover:text-blue-600">
<i v-if="price" class="fa fa-user"></i>
</a>
</footer>
</div>
</article>
I know it is kind of annoying to clutter up the markup like that, but its usually worth it =).
EDIT: It is actually as the docs say
Add a negative horizontal margin like -mx-2 to your column container and an equal horizontal padding like px-2 to each column to add gutters.
your issue is with the box-shadow that then doesn't let you create a visual gap, so technically you need the wrapper because of your box-shadow!