React'ta öğe ortalama

TurkishHepiNeyşın34 · 1 Ocak 2024

Aslında yaptım, ancak yazıdan dolayı çarpık oldu. Nasıl çözerim?

Kodlar:
navbar.tsx

JavaScript:

import Search from "./search"
export default function NavBar(){
    return(
    <div className="container-2xl  py-1 flex justify-items-center justify-start  border-b ">
        
        
            <div className="text-4xl nav-logo py-2 text-white">YourWiki</div>
            <Search/>
           {/* <div className="container-md mx-auto flex justify-center items-center"><Search/></div>*/}
            
            {/* <div className=""><button type="button" className=" flex justify-items-center justify-center text-gray-900 bg-white border border-gray-300 focus:outline-none hover:bg-gray-100 focus:ring-4 focus:ring-gray-200 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 dark:bg-gray-800 dark:text-white dark:border-gray-600 dark:hover:bg-gray-700 dark:hover:border-gray-600 dark:focus:ring-gray-700">Home </button></div> */}
      
            
        
    </div>
    )
    
}

search.tsx

JavaScript:

import { FaSearch } from "react-icons/fa";
export default function Search(){
     return(
      <div className="bg-red-800 md:container-md md:mx-auto">
        <form >
        <div id="box" className=" flex py-1  justify-items-center justify-center ">
         <button type="submit" className="text-gray-900 bg-white border border-gray-300 focus:outline-none hover:bg-gray-100 focus:ring-4 focus:ring-gray-200 font-medium rounded-l-lg text-sm px-4 py-3  dark:bg-gray-800 dark:text-white dark:border-gray-600 dark:hover:bg-gray-700 dark:hover:border-gray-600 dark:focus:ring-gray-700"><FaSearch/></button>
        <input type="text" id="search" className="text-gray-900 bg-white border border-gray-300 focus:outline-none hover:bg-gray-100 focus:ring-4 focus:ring-gray-200 font-medium rounded-r-lg text-sm px-20 py-3  dark:bg-gray-800 dark:text-white dark:border-gray-600 dark:hover:bg-gray-700 dark:hover:border-gray-600 dark:focus:ring-gray-700" placeholder="Search in YourWiki"/>
        
        </div>
        </form>
        </div>
        
     )

}

Kırmızı ile işaretlediğim öğeyi ortalama çalışıyorum.

brkdnmz · 3 Ocak 2024

NavBar bileşeninin en dıştaki div'ine position: relative; özelliğini ekleyip YourWiki yazısını kapsayan div'e position: absolute; left: 0; özelliklerini ekleyebilirsiniz.

Sanırsam Tailwind CSS kullanıyorsunuz, şu sınıflar yeterli olacak:

relative
absolute
left-0

Diğer özellikleri istediğiniz gibi ayarlayabilirsiniz.

Buradaki önerim, YourWiki yazısının boyutlarının arama kutusunu sağa kaydırmamasını sağlıyor. Sanki çubukta sadece arama kutusu varmış gibi olacak ve istediğiniz gibi tam kutu tam ortada duracak bu sayede.

React'ta öğe ortalama

Ayrıntılı düzenleme

TurkishHepiNeyşın34

Hectopat

brkdnmz

Megapat

Benzer konular

Technopat Haberler

Yeni konular

Yeni mesajlar

Gizliliğinize önem veriyoruz