為什麼在設定了父元素高度的情況下,我仍然無法實現垂直居中?
P粉493534105
P粉493534105 2023-09-11 17:27:43
0
1
531

我能夠使用mx-auto類,但是儘管我的myContainerFixed類別成功顯示高度固定,但我無法使my-auto類別起作用。

範例css

.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%)
}

HTML程式碼

        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>
        );

P粉493534105
P粉493534105

全部回覆(1)
P粉106711425

它與頂部元素(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;
}
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!