Question 330833 in Html Question posted in
Some basic documentation can be found here.

Html – Can't center button to the right in TailwindCSS

I’m trying to center the green <button> to the right on medium screens. I tried things like last:justify-end on container <div> but didn’t work (as centering last child will center last <div> inside the container <div> which contains the green button).

<header>
  <div class="container flex flex-col items-center space-y-3 p-4 md:flex-row">
    <a class="flex items-center space-x-3">
      <span class="text-2xl font-semibold text-orange-500">Hello</span>
    </a>
    <div class="flex space-x-3">
      <button class="cursor-pointer select-none rounded bg-green-500 px-6 py-2 text-white hover:bg-green-600 focus:outline-none">Button</a>
    </div>
  </div>
</header>

Playground

Tags:

3

Answers


  1. 0

    To center the green <button> to the right on medium screens, you can use a combination of utility classes. If you’re using a flex container, you can apply the following classes:

    <div class="flex justify-between md:justify-end items-center">
  <!-- Other elements on the left -->
  <button class="bg-green-500 text-white py-2 px-4 rounded">Your Button</button>
</div>

    In this example:

    • flex sets the container as a flex container.
    • justify-between spaces the elements inside the container with maximum space between them.
    • md:justify-end overrides the justify-between on medium screens (md: prefix is for medium screens and larger).
    • items-center centers the items vertically.

    Ensure that your container has the appropriate width and that the styles are applied correctly in your CSS or styling framework. Adjust padding and margins as needed for your specific layout.

    Login or Signup to reply.
  2. 0

    If I understand correctly, you want the button to be on the right of the screen on medium screen sizes and above.

    If that’s the case then adding md:justify-between to create the space between the elements.

    Read more on it here

    Tried uploading the image here, wasn’t working.

    https://imgur.com/Ade9nSW

    <header>
  <div class="container flex flex-col items-center gap-4 p-4 md:flex-row md:justify-between">
    <a class="flex items-center space-x-3">
      <span class="text-2xl font-semibold text-orange-500">Hello</span>
    </a>
    <div class="flex space-x-3">
      <button class="cursor-pointer select-none rounded bg-green-500 px-6 py-2 text-white hover:bg-green-600 focus:outline-none">Button</a>
    </div>
  </div>
</header>
    Login or Signup to reply.
  3. 0

    Here I got the thing for you

    <header>
  <div class=" container flex flex-col items-center space-y-3 p-4 md:flex-row">
    <a class="flex items-center space-x-3">
      <span class="text-2xl font-semibold text-orange-500">Hello</span>
    </a>
    <div class="flex space-x-3 max-md:self-end"
      <button class="cursor-pointer select-none rounded bg-green-500 px-6 py-2 text-white hover:bg-green-600 focus:outline-none">Button</a>
    </div>
  </div>
</header>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search