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>占据绝对位置时，您在破坏父.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属性

\d{4}(-|\/)\d{2}\1\d{2}

编辑：如果您想进一步了解flexbox的神奇特性，我强烈推荐this article。我经常引用它。

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

从position:absolute中删除top和.upperGrid。因为当您使用绝对值时，它是根据不是绝对值的最近包含块定位的。元素也会从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;
}

即使字体大小更改，容器内的文本垂直对齐

3 个答案: