Question

我正在尝试将平板电脑和智能手机模式下我网站的标题和品牌垂直居中：https://odetomytravels.com/

我只想将CSS代码添加到网站主题部分“附加CSS”。

谢谢！

site-title site-branding {
vertical-align: middle !important;
}

目前，在平板电脑和智能手机模式下，标题和品牌贴在页面顶部。

Answer 1

3件事：

您没有正确关闭媒体查询。
您没有正确查询课程。

请参阅div类的修订属性。我用红色突出显示了它。

        @media only screen and (max-width: 1024px)
        {

        .mobile-header .mobile-site-header {
            background-image: url(https://odetomytravels.com/wp-content/uploads/2019/10/Header-2_1.gif);
            background-size: cover !important;
            background-position: center;
        } 

        .site-branding {
            border:5px solid red;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            }
        }

Answer 2

首先，您需要设置该元素的display属性，或确保将其设置为可以使用的属性。

您的规则vertical-align需要内联或表块。

然后了解垂直居中要求定义元素的高度。如果可以设置元素的高度，则非常简单。这将尝试对齐其中的任何内容。

site-title site-branding {
    display:inline;
    height:400px;
    vertical-align: middle;
}

如何垂直居中我的网站标题？

2 个答案: