我能夠使用mx-auto
類,但是儘管我的myContainerFixed
類別成功顯示高度固定,但我無法使my-auto
類別起作用。
.mx-auto { margin-left: auto; margin-right: auto; } .my-auto { margin-top: auto; margin-bottom: auto; } .myContainerFixed { height: 90vh; } @screen lg { .myContainerFixed { height: 85vh; } } .w-max { width: max-content; }
儘管這在這種情況下肯定不是最佳選擇,但我還嘗試了使用絕對定位,但也沒有起作用以下是範例
.absoluteCenter { position: absolute; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%) }
return ( <div className='bg-yellow-400 myContainerFixed'> <form onSubmit={handleSubmit(formFunction)} className=" bg-pink-400 w-max p-2 mx-auto my-auto rounded-sm [&>input]:mb-4 [&>label]:mr-2"> <label>Name</label> <input type="text" {...register("name")} /> <div className='italic text-myDarkRed'>{errors.name?.message}</div> <label>Email</label> <input type="email" {...register("email")} /> <div className='italic text-myDarkRed'>{errors.email?.message}</div> <label>Available Weights</label> <input type="text" {...register("availableWeights", { setValueAs: (v: string | Array<number>) => Array.isArray(v) ? arrayToString(v) : v.split(",").map((weight) => Number(weight)) })} /> {/* */} <div className='italic text-myDarkRed'>{errors.availableWeights?.message}</div> <button type="submit" className="p-2 rounded shadow-sm bg-gradient-to-b from-myRed to-red-400">Submit</button> </form> </div> );
它與頂部元素(myContainerFixed)的display: block(預設)有關。
例如,給它display: flex;將修復此問題
我建議移除mx-auto和my-auto,並使用flex屬性定位表單