html - 在可调整大小的 div 中垂直居中输入

Question

我知道这个问题已经被回答了一千次，但我发现似乎没有任何效果。我有全宽图片，可以使用导航器窗口调整大小。然后我在中间有一个盒子，里面有文字。图像框和文字正在按预期调整大小，但我似乎无法使文字以多行文本为中心。这是我的 HTML:

<div class="block-full">
    <div class="info-box-full">
        <div class="slide-info">
            <span><?php echo $ss_slide_post_title?><br><?php echo $ss_slide_post_desc;?></span>
        </div>
    </div>
<img src="<?php echo $image_link[0];?>" alt="">
</div>

这是我的 CSS:

.block-full {
    height: 0;
    overflow: hidden;
    padding-bottom: 45%;
    position: relative;
    text-align: center;
    width: 100%;
}
.info-box-full {
    background-color: rgba(255, 255, 255, 0.8);
    height: 26%;
    margin-left: 40%;
    position: absolute;
    top: 37%;
    vertical-align: middle;
    width: 20%;
    z-index: 9999;
}
.slide-info {
    font-size: 1vw;
    line-height: 1;
    margin-top: 25%;
    text-align: center;
}
span {
    display: inline-block;
    line-height: normal;
    vertical-align: middle;
}

感谢您的帮助!

Answer 1

你想要的是 style="text-align:center"在 html 标签内，它会根据容器的大小将标签内的所有文本相对居中。