即使字体大小发生变化，也能垂直对齐容器内的文本

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