Align the text in the center of the button vertically

Struggling to vertically center text on a button? I understand the frustration! I've been working on this issue for a whole day with no success. My setup involves NEXT.js and TailwindCSS. 

<main>
  <div class='flex justify-center items-center h-screen'>
    <div class='bg-zinc-700 h-[610px] w-[340px] rounded-2xl flex justify-center'>
      <ul>
        <li>
          <div class='bg-black h-[100px] w-[275px] rounded-2xl shadow-2xl translate-y-11'></div>
        </li>
        <li>
          <div class='flex justify-center items-center h-[50%] translate-y-32 flex-row'>
            <ul>
              <li>
                <ul class='flex flex-row w-full'>
                  <li class='pr-6 text-3xl text-black'><button class='w-12 h-12 bg-gray-300 shadow-lg rounded-full'><p class='inline'>c</p></button></li>
                  <li class='pr-6 text-3xl text-black'><button class='w-12 h-12 bg-gray-300 shadow-lg rounded-full'>÷</button></li>
                  <li class='pr-6 text-3xl text-black'><button class='w-12 h-12 bg-gray-300 shadow-lg rounded-full'>x</button></li>
                  <li class='text-3xl text-black'><button class='w-12 h-12 bg-gray-300 shadow-lg rounded-full'>+</button></li>
                </ul>
              </li>
            </ul>
          </div>
        </li>
      </ul>
    </div>

  </div>
</main>

<script src="https://cdn.tailwindcss.com"></script>

Appreciate any help!

cssreactjsnext.jstailwind-csscentering

Answer №1

Indeed, quite frustrating. One workaround is to adjust the position of the element by 0.25rem using a custom class (I created a class named .nudgeup and surrounded the symbols with p tags).

<style>
  .nudgeup { position:relative; bottom:0.25rem; }
</style>
<main>
  <div class='flex justify-center items-center h-screen'>
    <div class='bg-zinc-700 h-[610px] w-[340px] rounded-2xl flex justify-center'>
      <ul>
        <li>
          <div class='bg-black h-[100px] w-[275px] rounded-2xl shadow-2xl translate-y-11'></div>
        </li>
        <li>
          <div class='flex justify-center items-center h-[50%] translate-y-32 flex-row'>
            <ul>
              <li>
                <ul class='flex flex-row w-full'>
                  <li class='pr-6 text-3xl text-black'><button class='w-12 h-12 bg-gray-300 shadow-lg rounded-full'><p class='inline nudgeup'>c</p></button></li>
                  <li class='pr-6 text-3xl text-black'><button class='w-12 h-12 bg-gray-300 shadow-lg rounded-full'><p class='nudgeup'>÷</p></button></li>
                  <li class='pr-6 text-3xl text-black'><button class='w-12 h-12 bg-gray-300 shadow-lg rounded-full'><p class='nudgeup'>x</p></button></li>
                  <li class='text-3xl text-black'><button class='w-12 h-12 bg-gray-300 shadow-lg rounded-full'><p class='nudgeup'>+</p></button></li>
                </ul>
              </li>
            </ul>
          </div>
        </li>
      </ul>
    </div>

  </div>
</main>

<script src="https://cdn.tailwindcss.com"></script>

Answer №2

Give this a shot:

  .nudgeup { position:relative; bottom:0.25rem; }

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

ESLint is cautioning developers that React Query mutations should be be added to the dependency array

When using the react-query library, I encountered a warning about the ESLint useEffect dependency. Here is an example of my code: const postProductMutation = useMutation(...); useEffect(() => { postProductMutation.mutateAsync() }, []) The issue is ...

reactjsreact-hookseslintuse-effectreact-query

Tips for storing information from input fields using Formik

My Formik form contains multiple input fields displayed in a drawer. Once the user enters data in these fields and submits the form, it adds queries and values to the URL, triggering a new request to load appropriate values in the datagrid component. The i ...

reactjsreact-routermaterial-uiformik

Include additional information beyond just the user's name, profile picture, and identification number in the NextAuth session

In my Next.js project, I have successfully integrated next-auth and now have access to a JWT token and session object: export const { signIn, signOut, auth } = NextAuth({ ...authConfig, providers: [ CredentialsProvider({ async authorize(crede ...

typescriptnext.jsnext-auth

Incomplete JSON response being received

We set up an express server to call an API and successfully requested the JSON object in our server. However, we are facing an issue where the JSON data is getting cut off when being displayed as a complete object on the client side. We tried using parse i ...

javascriptjsonreactjsexpress

Create an illustration of a canvas interacting with a database image source, but failing to display local images

When attempting to load an image onto a canvas, I encountered an issue. My code works without any errors when I use image.src="https://somelink", but throws a GET error when I try to import with image.src="../public/vercel.svg. Below is my c ...

javascriptreactjsnext.jshtml5-canvas

Conceal the block quotes while substituting with a newline

My HTML page contains numerous comments enclosed in blockquotes. I attempted to implement a feature that allows users to hide all the comments with just one click by using the following JavaScript code: const blockQuotes = document.getElementsByTagName(& ...

javascriptcss

Can a specific element be chosen based on its background color?

Is it possible to change the background color of a child element within a div that has a specific background color using CSS? See my explanation below. For example: .container[background-color=some color] .content { background-color: some other color ...

javascripthtmlcss

Is there an issue with VUE npm run serve due to Tailwindcss being absent?

A few months back, I embarked on a project using Vue and incorporated Tailwind CSS by running the command (Vue add Tailwind). Recently, when attempting to create a new project with the default Vue3 template using the command vue create project and then na ...

vue.jsvuejs3tailwind-css

The submit button on the HTML form is not functioning properly and requires activation

Currently, I am a student focusing on honing my skills by working on an app for a blog post. To kickstart my project, I downloaded the "clean-blog" template from the startbootstrap website. If you are interested, here is the link to the template: My curr ...

htmlcssformsejs

Error: an empty value cannot be treated as an object in this context when evaluating the "businesses" property

An error is occurring stating: "TypeError: null is not an object (evaluating 'son['businesses']')". The issue arose when I added ['businesses'][1]['name'] to 'son' variable. Initially, there was no error wi ...

javascriptreactjsgoogle-cloud-firestoreyelp-fusion-api

CommunicationsError on Socket.io server

I am currently experiencing an issue with a Socket.io server that is running through an Express.js server with Next.js. The server is sending errors without any client being connected. However, clients can still connect from the browser without any proble ...

expresssocket.ionext.js

Choose a dropdown menu that will show a specific text instead of the actual value

I am currently developing a project that relies on react and redux for implementation. My goal is to have the SelectField component show a string to users, but select the ID value when an option is chosen. With the use of material-ui 0.19.3v, I was able ...

reactjsreduxmaterial-ui

Whenever I try to log in using axios and my credentials are incorrect, I don't receive any response back in the catch block

I cannot receive any response when calling the login API from Node.js. In the frontend, I am handling the catch as well. How do I retrieve the Invalid Credentials message from the backend API if the credentials do not match? The code for my backend logi ...

node.jsreactjsreduxaxios

After closing, the position of the qtip2 is being altered

I've successfully integrated the qtip2 with fullcalendar jQuery plugin, which are both amazing tools. However, I'm encountering an issue with the positioning of the qtip. Here's the code snippet I'm using: $(window).load(function() { ...

javascriptjquerycssqtip2

Enhance your Nextjs13 website by incorporating FAQ structured data snippets

I'm currently developing a blog using NextJs13 and Strapi, and on certain pages/posts, I have incorporated a FAQ section. The rendering of my page is done SERVER SIDE In the file [slug]/page.tsx, I implemented the following solution: const Place = a ...

reactjsnext.jsseonext.js13

Is it possible to pass a useState function to a component during its initialization?

Currently, I am utilizing the useState hook to effectively handle the rendering of components on the screen. My goal is to initialize it with a component while passing in the useState function to set the screen within the component. Below is my App.js fil ...

javascriptreactjsreact-hooksuse-state

Tips on creating a responsive div element within the viewport?

I have a variety of nested div elements within a parent div, set up like this: #mycontent > div { width: 14.28%; } <div id="myheader">some header content</div> <div class="container" id="mycontent"> <div class="outerdiv" id= ...

htmlcss

Which library does stackoverflow utilize to showcase errors (utilizing Bootstrap popover for error help-block)?

Currently, I am using bootstrap's has-error and help-block classes to display validation error messages in my form. However, I find the error message display in Stackoverflow's Ask Questions Form to be very appealing. Are they using a specific js ...

javascripttwitter-bootstrapcss

What is the best way to center CSS slider switches without causing any damage to them?

Does anyone have ideas on how to align CSS Slider Switches? I tried using position: absolute; margin-left: 15em, but the sliders need to remain non-absolute for visual effects. A flex grid was considered, but I don't want the switches to wrap. Usin ...

htmlcss

Ways to slightly boost the default font-size values when using wicked-pdf

In the wicked-pdf report, I have body content with varying font sizes. When I apply a font-size of 16px to the paragraph like so: p { font-size: 16px !important; } The entire paragraph's font size becomes 16px, which may include words with diff ...

ruby-on-railshtmlcssruby-on-rails-2wicked-pdf