Question

我有Primefaces's components生成的以下HTML代码（我只考虑过HTML重要代码）

<html>
    <body>
    <link type="text/css" rel="stylesheet" href="/tiendaVirtual/css/init.css" /></head><body>
    <div id="page">
        <div id="header">
            //Header content
        </div>
        <div id="content">
            <div id="dvLogin">
                <div id="pnlLogin" class="ui-panel ui-widget ui-widget-content ui-corner-all pnlLogin" data-widget="widget_pnlLogin">
                    <div id="pnlLogin_header" class="ui-panel-titlebar ui-widget-header ui-helper-clearfix ui-corner-all">
                        <span class="ui-panel-title">Login</span>
                    </div>
                    <div id="pnlLogin_content" class="ui-panel-content ui-widget-content">
                    </div>
                <div>
            </div>
        </div>
        <div id="footer">
            //Footer content
        </div>
    </div>
    </body>
</html>

你的css文件init.css：

body{
    font-size: 12px !important;
}

#page{
    width: 100%;
    height: 100%;
    position: absolute !important;
}

#header{
    height: auto !important;
    top: 0;
}

#content{
    height: 100% !important;
    display: block;

}

#footer{
    height: auto !important;
    position: absolute; 
    width: 100%; 
    bottom: 0;
}
.dvLogin{
    vertical-align: middle;
    height: 660px !important;
}

.pnlLogin{
    width: 500px;
    margin: auto auto !important;
}

#pnlFooter{
    margin-bottom: 10px !important

这将生成以下HTML页面：

enter image description here

我希望名为“登录”的面板垂直和水平居中，但我不知道......

PD：

我添加了XHTML页面：

login.xhtml

<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:p="http://primefaces.org/ui"
                template="/templates/template.xhtml">
    <ui:define name="content">
        <h:form prependId="false">
        <div id="dvLogin">

            <p:panel id="pnlLogin" header="Login" styleClass="pnlLogin">
                <h:panelGrid columns="2">
                    <p:outputLabel value="Usuario"/>
                    <p:inputText id="txtUsuario" value="#{loginBean.usuario}" required="true" requiredMessage="Especificar usuario"/> 
                    <p:outputLabel value="Contraseña"/>
                    <p:password id="pswContrasenia" value="#{loginBean.contrasenia}" required="true" requiredMessage="Especificar contraseña"/>  
                </h:panelGrid>
                <p:commandButton value="Ingresar" action="#{loginBean.ingresar}" />
            </p:panel>
        </div>
        </h:form>

    </ui:define>
</ui:composition>

的template.xhtml

<!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:f="http://java.sun.com/jsf/core"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:p="http://primefaces.org/ui">
<f:loadBundle basename="resources.application" var="msg"/>

<h:head>
    <link type="text/css" rel="stylesheet" href="#{request.contextPath}/css/init.css" />
</h:head>
<h:body>
    <div id="page">
        <div id="header">
            <ui:insert name="header" >
              <ui:include src="/templates/header.xhtml" />
            </ui:insert>
        </div>
        <div id="content">
            <ui:insert name="content">

            </ui:insert>
        </div>
        <div id="footer">
            <ui:insert name="footer" >
              <ui:include src="/templates/footer.xhtml" />
            </ui:insert>
        </div>
    </div>


</h:body>
</html>

header.xhtml

<ui:composition
    xmlns="http://www.w3.org/1999/xhtml"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:p="http://primefaces.org/ui">
    <p:panel>
        <p:graphicImage value="/img/common/logo.png" />
    </p:panel>
</ui:composition>

footer.xhtml

<ui:composition
    xmlns="http://www.w3.org/1999/xhtml"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:p="http://primefaces.org/ui">
    <p:panel id="pnlFooter">
        Everis Peru &#169; - Shoppping Cart
    </p:panel>
</ui:composition>

Answer 1

您需要查看的内容很少。

1）不需要绝对位置绝对和！重要标签这可以通过diaplay简单实现：表格属性如下

<强> CSS

#content:before {
  content: '';
  display: inline-block;
  height: 100%; 
  vertical-align: middle;
  margin-right: -0.25em; /* Adjusts for spacing */

  /* For visualization 
  background: #808080; width: 5px;
  */
 }

#dvLogin {
  display: inline-block;
  vertical-align: middle;
  width: 500px;
  padding: 10px 15px;
  border: #a0a0a0 solid 1px;
  background: #f00;
 }

html, body{height:100%;}

Demo - jsfiddle ，即全屏Demo full screen

你还需要检查CSS，因为在上面的演示中注释了不需要的css。所以请检查

<强> Reference Link

希望它有帮助！

将div元素置于另一个div元素中

1 个答案: