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

Question

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

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

谢谢 ！

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

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

Answer 1

3件事：

1. 您没有正确关闭媒体查询。
2. 您没有正确查询 class。

3. 请参阅 div class 的修订属性。 我用红色突出显示它。

    @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

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

您的规则垂直对齐需要一个内联或表格块。

然后了解垂直居中需要定义元素的高度。 如果您可以设置元素的高度，那么这很容易。 这将尝试对齐其中的任何内容。

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