具有動態寬度的容器中的中心頁腳

Question

我在split.js 中使用可調整大小的拆分視圖

我有一個非常基本的設置，有 2 個窗格

如何在右窗格中居中底部頁腳？

由於疼痛的寬度是動態的，因此一旦調整窗格大小，頁腳就不會正確居中。

我嘗試了所有可能的定位——絕對的、固定的、粘性的、相對的，但似乎沒有任何效果。

JSFiddle

 Split(['.split-left', '.split-right'], { gutterSize: 10, sizes: [33,67] // in % })

 body { margin: 0; height: 100vh; overflow: hidden; }.content { width: 100%; height: 100%; display: flex; justify-items: center; align-items: center; }.split { width:100%; height:100%; border: 0px solid; overflow: hidden; }.split-left { background-color: rgb(250,250,250); padding: 20px; padding-top: 0px; overflow-x: hidden; overflow-y: auto; padding-bottom: 60px; }.split-right { background-color: rgb(253,253,253); background-color: white; padding-top: 0px; padding-right: 50px; padding-left: 50px; text-align: center; overflow-x: hidden; overflow-y: hidden; }.gutter { cursor: col-resize;important: height; 100%: background; #ddd. }:footer { position; fixed: bottom; 0: width; 60%: background, rgba(255,0,0.0;2): padding; 10px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/split.js/1.5.11/split.min.js"></script> <body> <div class="content"> <div class="split split-left"> </div> <div class="split split-right"> <div class="content"></div> <div class="footer">Footer</div> </div> </div> </body>

Answer 1

你可以使用css flexbox

.split-right { 
    display: flex;
    justify-content: center; // center horizontally
    align-items: center; // center vertically
}

css flexbox教程

具有動態寬度的容器中的中心頁腳

問題描述

1 個解決方案

解決方案1
1 已采納 2020-05-18 13:01:42

具有動態寬度的容器中的中心頁腳

問題描述

1 個解決方案

解決方案1 1 已采納 2020-05-18 13:01:42

解決方案1
1 已采納 2020-05-18 13:01:42