Cannot center navbar and logo with tailwind-CodePudding

I wrote the styles in the code below with tailwind css for my navbar which made it all inline But I want all the content centered instead but don't know what corrections to make to the code that will help me achieve that. Please help me make my header centered with tailwind css

Header.jsx

import React, {useState, useEffect} from 'react'
import Link from 'next/link'

import { getCategories } from '../services';


const Header = () => {
    const [categories, setCategories] = useState([]);
    useEffect(() => {
        getCategories()
            .then((newCategories) => setCategories(newCategories))
        }, [])

    return (
        <div className="container mx-auto px-10 mb-8 sticky top-0 z-10">
            <div className="border-b w-full inline-block border-blue-400 py-8">
                <div className="md:float-left block">
                    <Link href="/">
                        <span className="cursor-pointer font-bold text-4xl text-white">
                            Favourite Tech Solutions
                        </span>
                    </Link>
                </div>
                <div className="hidden md:float-left md:contents">
                    {categories.map((category)=>(
                        <Link key={category.slug} href={`/category/${category.slug}`}>
                            <span className="md:float-right mt-2 align-middle text-white ml-4 font-semibold cursor-pointer">
                                {category.name}
                            </span>
                        </Link>
                    ))}
                </div>
            </div>
        </div>
    
    )
}

export default Header

CodePudding user response：

Using Flexbox will allow you to center the header easily:

return (
    <div className="container mx-auto px-10 mb-8 sticky top-0 z-10 bg-black">
      <div className="border-b flex justify-center items-center border-blue-400 py-8">
        <div className="md:inline-flex">
          <a href="/">
            <span className="cursor-pointer font-bold text-4xl text-white">
              Favourite Tech Solutions
            </span>
          </a>
        </div>
        <div className="hidden md:inline-flex">
          {categories.map((category) => (
            <a key={category.slug} href={`/category/${category.slug}`}>
              <span className="md:float-right mt-2 align-middle text-white ml-4 font-semibold cursor-pointer">
                {category.name}
              </span>
            </a>
          ))}
        </div>
      </div>
    </div>
  );

You can change the justify-center to justify-between if you prefer.

CodePudding user response：

Present design

Modified design

According to your comment i guess this is what you wanted .

I did work-through using flex , the code goes like:

 <div>
  <div className="container mx-auto px-10 mb-8 sticky top-0 z-10 bg-black">
    <div className="border-b w-full flex flex-col border-blue-400 py-4">
      <div className="flex items-center justify-center my-1">
        <span className="cursor-pointer font-bold text-4xl text-white">
          Favourite Tech Solutions
        </span>
      </div>
      <div className=" hidden md:flex items-center justify-center ">
        {categories.map((category) => (
          <a key={category.slug} href={`/category/${category.slug}`}>
            <span className="md:float-right mt-2 align-middle text-white ml-4 font-semibold cursor-pointer">
              {category.name}
            </span>
          </a>
        ))}
      </div>
    </div>
  </div>
</div>