垂直对齐100vh容器内的文本 [英] Vertically align text inside 100vh container

问题描述

我尝试了所有关于此主题的建议方法，但无法使用。我垂直对齐图像与垂直对齐/行高度的方法，但无法弄清楚如何垂直对齐文本框。

I have tried all the suggested methods I could find on this subject but cannot get any to work. I vertically aligned the image with the vertical-align/line-height method but cannot figure out how to vertically align the text boxes.

- url解决后问题解决 - -

-- url removed after issue solved --

向下滚动到第二或第三个问题，查看我需要的页面类型的示例。我希望有比我更多经验的人可以立即发现我要出错的地方，如果有帮助，我可以提供相关代码片段。

Scroll down to the 2nd or 3rd problem to see examples of the type of page I need this on. I am hoping someone with more experience than me can immediately spot where I'm going wrong, I can provide relevant snippets of code if helpful.

预先致谢

推荐答案

将文本放入包含 div 注意100vh容器需要非静态定位）：

Put the text in a containing div and give that div the following style (note the 100vh container needs to be non statically positioned):

.vertical-center{
    position: absolute;
    top:50%;
    left: 0%;
    transform:translate(0%, -50%);
    -webkit-transform:translate(0%, -50%);
}

如果100vh容器小于文本区域所以它需要一个合适的 min-height 。

This will break down if the 100vh container is smaller than the area the text would take up, so it'll need an appropriate min-height.

这篇关于垂直对齐100vh容器内的文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！