Odoo13 - 内容垂直居中的自定义网页

Question

我正在尝试创建一个在页面中间有一个元素的新页面（水平和垂直居中）。但是 Odoo 布局给我带来了很大的麻烦，并且不允许我正确地居中。我还需要添加页面背景，但因为我的元素不是全高，所以效果不佳。

我有这样的东西：

<template id="custom_page" name="Custom page">
        <t t-call="website.layout">
            <t t-set="pageName" t-value="'Custom page'" />
            <div class="my_page">
                <div class="oe_structure">
                
                    <div id="custom_page" class="container">  <!-- Not able to center verticaly -->                              
                        <div class="card-group mx-auto col-9">
                            <div class="card">
                                ...
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </t> 
</template>

我可以使用 mx-auto 将我的元素水平居中，但我不知道如何垂直居中。 Odoo 添加了一个 #wrapwrap 其中有 display: flex 并且在它里面有一个 main 和 flex: 1 0 auto，这使得主要伸展并将页脚推到页面底部。

但是现在当我试图对内部元素的高度做任何事情时，它根本不起作用。 height: 100%、my-auto 等等...

我尝试在不同的地方添加一个 div 和我的自定义 css，但充其量它什么也不做，或者会影响整个页面。

Answer 1

我找到了解决方案。

我之前没有意识到这一点，但是这一行：

<t t-set="pageName" t-value="'Custom page'" />

实际上是在 div #wrapwrap 中添加一个 class 和 pageName 值。这允许我在 CSS 中定位我的特定网页并根据我的需要修改 flexbox 功能（如果我只是更改 #wrapwrap 的 [，我以前无法在不破坏每个页面的情况下做到这一点=27=]).

所以我将 pageName 值更改为正确的 class 名称：

<t t-set="pageName" t-value="'custom_page'" />

然后与SCSS一起使用修改flexbox并添加背景：

.custom_page{
    background-image: url('/image.png'); 
    background-attachment: fixed;
    background-position: center top; 
    background-repeat: no-repeat;
    background-size: cover;

    main {
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

Odoo13 - 内容垂直居中的自定义网页

Odoo13 - Custom webpage with content centered vertically

html

css

flexbox

odoo

odoo-13