即使字體大小發生變化，也能垂直對齊容器內的文本

Question

我正在嘗試垂直對齊：將具有不同字體大小的容器內的文本居中。 之前有人問過這個問題，但我無法獲得任何適合我的解決方案，我錯過了什么？

我希望具有不同字體大小的文本在容器中間垂直對齊。

這是代碼：。

 let upperGuideText = document.getElementById("upperGuideText"); let guide = "Some text here" setTimeout(function(){ upperGuideText.style.fontSize = "3vw"; upperGuideText.innerHTML = `${guide}`; }, 500); setTimeout(function(){ upperGuideText.style.fontSize = "5vw"; upperGuideText.innerHTML = `${guide}`; }, 2500);

 .upperGuideContainer { position: absolute; overflow: hidden; left: 10vw; top: 51vh; height: 26vh; width: 88vw; display: flex; justify-content: center; align-items: center; outline: 0.1vw dashed orange; } .upperGuide { position: absolute; font-family: 'Open Sans', sans-serif; font-weight: bold; color: rgb(128, 128, 128); left: 0.5vw; top: -11.4vh; opacity: 1; vertical-align: middle; }

 <div class = "upperGuideContainer"> <p id="upperGuideText" class="upperGuide"></p> </div>

Answer 1

你要求你的 CSS 做兩件不同的事情，這導致了你的問題。

您包含在父容器中的以下 flexbox 屬性足以實現您想要的。

.upperGuideContainer {
    display: flex;
    justify-content: center;
    align-items: center;
}

當您告訴孩子<p>采取絕對位置時，您正在破壞父級的 flexbox 屬性

.upperGuide {
    /* position: absolute; */
    font-family: 'Open Sans', sans-serif;
    font-weight: bold;
    color: rgb(128, 128, 128);
    /* left: 0.5vw; */
    /* top: -11.4vh; */
    opacity: 1;
    /* vertical-align: middle; */
}

編輯：如果你想了解更多關於 flexbox 的神奇屬性，我強烈推薦這篇文章。 我不斷地參考它。

Answer 2

我認為當您真的不需要這樣做時，您正在對孩子使用絕對位置。 一旦您的父容器具有“display: flex”作為屬性，您就可以將事物與“align-items”和“justify-content”對齊，除非您出於其他目的需要它，否則子容器無需具有絕對位置。

 .upperGuideContainer { position: absolute; overflow: hidden; left: 10vw; top: 51vh; height: 26vh; width: 88vw; display: flex; justify-content: center; align-items: center; outline: 0.1vw dashed orange; } .upperGuide { /*position: absolute;*/ font-family: 'Open Sans', sans-serif; font-weight: bold; color: rgb(128, 128, 128); /*left: 0.5vw;*/ /*top: -11.4vh;*/ opacity: 1; /*vertical-align: middle;*/ }

作為旁注，如果您在絕對容器內的容器中使用絕對位置，則應避免使用vh （視口高度）和vw （視口寬度），因為這些值來自視口。 我建議改用 % 或 px ，因為它們更准確。

Answer 3

從.upperGrid刪除position:absolute和top 。 因為當您使用絕對時，它根據最近的非絕對包含塊定位。 該元素也從 flex 顯示中取出。

.upperGuideContainer {
    position: absolute;
    overflow: hidden;
    left: 10vw;
    top: 51vh;
    height: 26vh;
    width: 88vw;   
    display: flex;
    justify-content: center;
    align-items: center;
    outline: 0.1vw dashed orange;
}

.upperGuide {
    font-family: 'Open Sans', sans-serif;
    font-weight: bold;
    color: rgb(128, 128, 128);
    left: 0.5vw;
    opacity: 1;
    vertical-align: middle;
}