标题集中在桌面上，但不是移动设备？

Question

我有一个横幅图片，标题覆盖它。在桌面上查看时，标题垂直和水平对齐。但是，使用移动设备使其水平居中，而不是垂直居中。 （我知道它最好使用样式表，但暂时，我有CSS内联。我最终会修复它。 CSS / HTML：

AnimationSet

网站：wolfvalley.freeforums.net

Answer 1

这是您的浏览器：css transform属性需要修复Safari。尝试：

 <div class="content-b" style="margin: 0px auto; z-index: 10; text-align: center; position: relative; top: 50%; transform: translateY(-50%); -webkit-tranform: translateY(-50%); -moz-transform: translateY(-50%); font-size: 50px;">

Answer 2

这不是我提供的完整答案。 您必须设置视口才能在手持设备中正确查看页面。

例如，你的头文件标签中的<meta name="viewport" content="width=device-width, initial-scale=1.0">。

此外，您还必须通过在css中添加媒体查询来相应地调整css到您要查看页面的设备。

例如，

@media screen and (max-width: 400px) {
        h1 {
           text-align: center;
        }
      }

    @media screen and (min-width:450px){
        h1 {
            text-align: center;
        }

        h2 {
            text-align: left;
        }
    }

注意：这正是我认为的样子。您必须根据要在不同设备上显示内容的方式更改css。