我能够使用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>
);
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
它与顶部元素(myContainerFixed)的display: block(默认)有关。
例如,给它display: flex;将修复此问题
.myContainerFixed { display: flex; height: 90vh; }我建议移除mx-auto和my-auto,并使用flex属性来定位表单
.myContainerFixed { height: 90vh; display: flex; justify-content: center; align-items: center; }