时间戳

首页 > 解决方案 > Odoo13 - 内容垂直居中的自定义网页

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

问题描述

我正在尝试使用页面中间的元素创建新页面（水平和垂直居中）。但是 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 添加了一个#wrapwrapwhich hasdisplay: flex并且在其中有一个mainwith flex: 1 0 auto，这使得 main 可以拉伸并将页脚推到页面底部。

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

我试图在不同的地方用我的自定义 css 添加一个 div，但充其量它什么也不做或制动整个页面。

标签： htmlcssflexboxodooodoo-13

解决方案

我找到了解决方案。

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

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

实际上在 div 中添加了一个#wrapwrap带有pageName值的类。这使我可以在 CSS 中定位我的特定网页，并根据我的需要修改 flexbox 功能（如果我只是更改了 CSS，我以前无法在不破坏每个页面的情况下做到这一点#wrapwrap）。

所以我将一个pageName值更改为正确的类名：

<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;
    }
}

推荐阅读