Question

我的网站包含大横幅图片的网页。默认情况下，模板会将页面标题放在这些横幅中，但会使标题垂直放置。为了解决这个问题，我使用了translateY调整将每个垂直中心放在各自的横幅中。以下是代码：

HTML IDs: #page-title, #page-description

#page-title, #page-description { transform: translateY(...px); }

这可以按预期工作。但是，似乎每个标题都需要不同的px值来居中。此外，该解决方案根据屏幕尺寸具有不同的效果; 60px对桌面的影响比在移动设备上要小得多，依此类推。这在便携式设备上产生了一些设计不一致性。因此，以这种方式做事似乎不是最佳的。

是否有一种更通用的解决方案可以应用于垂直居中这些标题，不需要针对每种显示尺寸进行调整？我离开了使用填充，＆＃34; vertical-align：middle＆＃34;似乎不起作用。任何帮助将不胜感激！

我的网站：www.tylercharboneauprofessional.com

泰勒

Answer 1

您可以使用转换率转换的百分比值，如下所示：

transform: translateY(50%);

或者你可以使用display：flex来水平和垂直居中：

#page-title, #page-description { 
  display: flex;
  align-items: center;
  justify-content: center;
}

两者的旁注：您的标题容器需要具有横幅的完整高度，否则将无法正确设置框的中心。之后，您可能需要补偿导航的高度，以使可见部分看起来以margin-top为中心：45px;例如。

一般来说，您不仅要对＃page-title进行一些细微的编辑，还要对＃banner-area进行一些编辑。当前横幅的构建方式可以真正重新考虑所有事物如何融合在一起，说实话。

随时问你是否还有其他问题！