圍繞div元素

我有Primefaces's components產生下面的HTML代碼（我只考慮HTML重要的代碼）圍繞div元素

<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網頁：

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

來源

2014-03-31 Cesar Miguel

'init.css'裏的css怎麼樣？你可以複製這個使用http://jsfiddle.net？ –

[水平垂直居中DIV]的可能重複（http://stackoverflow.com/questions/14123999/center-a-div-horizontally-and-vertically） –

init.css是我發佈的css文件 –

有跡象表明，你需要尋找一些東西。

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

希望它能幫助！

來源

2014-03-31 18:06:31

回答

相關問題