个人中心
gpt4 book ai didi

css - 将 div 元素置于另一个 div 元素的中心

转载 作者：行者123 更新时间：2023-11-28 10:51:41 25 4
gpt4 key购买 nike

我有以下由 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

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

开发人员:

我添加了 XHTML 页面:

登录.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>

模板.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>

标题.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>

页脚.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>

最佳答案

您需要查看的内容很少。

1) 不需要不需要的绝对位置和 !important 标签，这可以通过 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

希望对您有所帮助!

关于css - 将 div 元素置于另一个 div 元素的中心，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22768487/

25 4 0
文章推荐： swift - 手动设置导航项的 titleView 未垂直对齐
文章推荐： css - 为什么隐含使用媒体查询类型 "all"？
文章推荐： javascript - jQuery Sidescroll，动画 ScrollLeft
文章推荐： html - 如何使div的透明部分
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com