在页面中间创建内容面板答案

【问题标题】：Create Conetent Panel in middle of page在页面中间创建内容面板
【发布时间】：2012-11-01 07:35:44
【问题描述】：

我想创建一个位于页面绝对中间的内容面板。它可以在滚动条出现之前将其宽度和高度扩展到页面的一定百分比。

我在 JSF 页面上使用 Primefaces。我相信有很多解决方案可以做到这一点。我想用JSF的作文。

这是我的解决方案：

<p:layout id="layout">
        <p:layoutUnit position="center">
            <p:panel header="Test" style="width:50%">
                <ui:insert name="content"/>
            </p:panel>
        </p:layoutUnit>
    </p:layout>

但是，这并没有真正做任何事情。它不居中，我插入“内容”标签的内容会扩展到整个页面。

谁能帮助我实现目标？

编辑

我已经尝试了 Rick Calder 发布的解决方案。下面是我的代码。但是，它对我不起作用。我将css写入style.css。我将 javascript 写入 resizeContentPanel.js。我在resource.xhtml 的头部加载了JQUery 和resizeContentPanel.js。我相信这些都是正确的步骤。有什么我可能会丢失的。

至于我实际上错了什么，我没有看到内容面板。当我调试 javascript 时，它的高度边距为 -71，宽度边距为 -160。我假设这就是我看不到它的原因。

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
  xmlns:h="http://java.sun.com/jsf/html"
  xmlns:ui="http://java.sun.com/jsf/facelets"
  xmlns:p="http://primefaces.org/ui"
  xmlns:f="http://java.sun.com/jsf/core">
<h:head>
    <title>
        <ui:insert name="windowTitle"/>
    </title>

    <h:outputStylesheet library="css" name="style.css"/>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <h:outputScript library="scripts" name="resizeContentPanel.js" />
</h:head>
<h:body>
    <div class="centeredPanel">
        <p:layout id="layout" >
            <p:layoutUnit position="center">
                <ui:insert name="content"/>
            </p:layoutUnit>
        </p:layout>
    </div>

    <h:form>
        <div id="stack">
            <p:stack id="stackMenu" icon="/resources/images/stack/stack.png" model="#{pageBuilder.stackMenuModel}" /> 
        </div>
    </h:form>

    <div id="dock">
        <p:dock id="dockMenu" model="#{pageBuilder.dockMenuModel}"/>
    </div>

</h:body>

style.css

root 
{ 
    display: block;
}

body
{
    background-image: url('../../resources/images/background/background.jpg');
}

.centeredPanel{
    width:25%;
    height:25%;
    min-width:100px;
    min-height:100px;
    position:absolute;
    left:50%;
    top:50%;
}

resizeContentPanel.js

$(document).ready(function(){
var heightMargin =  -($('.centeredPanel').height()/2);
var widthMargin=  -($('.centeredPanel').width()/2);
$('.centeredPanel').css('margin-left',widthMargin);
$('.centeredPanel').css('margin-top',heightMargin);
});

$(window).resize(function(){
var heightMargin =  -($('.centeredPanel').height()/2);
var widthMargin=  -($('.centeredPanel').width()/2);
$('.centeredPanel').css('margin-left',widthMargin);
$('.centeredPanel').css('margin-top',heightMargin);
});

【问题讨论】：

标签： html css jsf primefaces

【解决方案1】：

要使页面中的某些内容完美居中，您确实希望它具有固定大小，以便进行计算。

.centeredPanel{
    width:500px;
    height:500px;
    position:absolute;
    left:50%; //sets left edge at the midway point of it's container
    top:50%; //sets top edge at the midway point of it's container
    margin-left:-250px; //moves the div back half it's width to centre it.
    margin-top:-250px; //moves the div up half it's height to centre it.
}

演示：http://jsfiddle.net/calder12/qNNvb/

要使用百分比，需要 jQuery。

.centeredPanel{
    width:25%;
    height:25%;
    min-width:100px;
    min-height:100px;
    position:absolute;
    left:50%;
    top:50%;
    background-color:red;
}


$(document).ready(function(){
var heightMargin =  -($('.centeredPanel').height()/2);
var widthMargin=  -($('.centeredPanel').width()/2);
$('.centeredPanel').css('margin-left',widthMargin);
$('.centeredPanel').css('margin-top',heightMargin);
});

$(window).resize(function(){
var heightMargin =  -($('.centeredPanel').height()/2);
var widthMargin=  -($('.centeredPanel').width()/2);
$('.centeredPanel').css('margin-left',widthMargin);
$('.centeredPanel').css('margin-top',heightMargin);
});

演示：http://jsfiddle.net/calder12/qNNvb/3/

【讨论】：

太棒了，谢谢！是否可以将高度和宽度作为页面的百分比。就像我希望它占据 75% 的宽度和 50% 的高度。这可能吗？
我认为如果您想使用百分比，您将需要使用 javascript 来计算高度和宽度并适当地设置边距。我想不出另一种方法。
感谢您发布此信息。我试图实现它。请你看看我上面的编辑。我似乎无法正确显示它。
代码实际上是 jQuery，我相信它必须放在页面本身而不是外部 js 文件中。
好的，我想通了。显然 Primefaces 会自动添加 jqury。所以当我再次添加时，它导致各种事情出错。您的解决方案运行良好。再次感谢。

【解决方案2】：

您可能希望使用 JQuery 使页面居中。这个解决方案有效吗？

https://stackoverflow.com/a/210733/1285564

【讨论】：