如何修改 WordPress“Amadeus”主题的 CSS 居中？

Question

我在 Wordpress 中居中和对齐名为“Amadeus”的主题时遇到了真正的困难。 该网站是heidikaloustian.com 。 我想要 .content-area 的宽度为 740px 并将其居中，菜单应左对齐，菜单应根据模型在其中右对齐。 帮助，我错过了什么？

中心设计模型；

Answer 1

这是你的开始：

/* Line 1117 in style.css */
.site-header {
    text-align: left;
    background-color: #fff;
    width: 740px;
    margin: auto;
}
/* Line 1199 in style.css */
.site-content {
    text-align: center;
    margin-top: 0px;
    width: 740px;
}

由于您的内容被限制为 740 像素，因此我将整个页面内容和标题设置为该宽度，并提供您在模型中显示的外观。

Answer 2

您可以执行以下操作：

#page {
    width: 740px;
    margin: 0 auto;
}

.site-header {
    display: flex;
}

.main-navigation {
    align-self: flex-end;
}

.main-navigation li {
    padding: 14px;
}

您需要从站点标题和主导航中删除容器类。 还要记住添加 flexbox 前缀，以防您要支持其他浏览器。