Primefaces 更改页面中心的咆哮位置
我使用的是jsf2.2 primefaces 6.0，我已经实现了一个带有咆哮的登录界面来显示身份验证失败。现在的问题是，我想在网页的中心显示咆哮，而不是右上角，以获得更好的人体工程学效果 xhtml代码：Primefaces 更改页面中心的咆哮位置,primefaces,jsf-2.2,growl,Primefaces,Jsf 2.2,Growl,我使用的是jsf2.2 primefaces 6.0，我已经实现了一个带有咆哮的登录界面来显示身份验证失败。现在的问题是，我想在网页的中心显示咆哮，而不是右上角，以获得更好的人体工程学效果 xhtml代码： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <ui:composition
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:f="http://xmlns.jcp.org/jsf/core"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
xmlns:jsf="http://xmlns.jcp.org/jsf"
xmlns:pt="http://xmlns.jcp.org/jsf/passthrough"
xmlns:p="http://primefaces.org/ui"
template="/facelets/templateLogin.xhtml">
<ui:define name="pageTitle">Please login ...</ui:define>
<ui:define name="content">
<div id="login-box" class="login-box visible widget-box no-border">
<div class="widget-body">
<div class="widget-main">
<h4 class="header blue lighter bigger">
<i class="fa fa-sign-in"></i> Entrer vos informations
</h4>
<div class="space-6"></div>
<div class="space-6"></div>
<div class="space-6"></div>
<h:form id="loginFormId">
<h:panelGrid id="grid" cellpadding="5">
<p:growl id="growl" showDetail="true" sticky="true" />
<fieldset>
<label class="block clearfix"> <span
class="block input-icon input-icon-right" > <p:inputText title="Entrer votre matricule"
id="Matricule" value="#{identity.user.matricule}" required="true"
class="form-control" pt:placeholder="Matricule" /><i
class="ace-icon fa fa-user" /> <p:message for="Matricule" display="tooltip" />
</span>
</label> <label class="block clearfix" id="labelPassword"> <span
class="block input-icon input-icon-right"> <p:password title="Entrer votre mot de passe"
id="password" pt:placeholder="Mot de passe" required="true"
value="#{identity.user.password}" styleClass="form-control" />
<p:message for="password" display="tooltip" /> <i
class="ace-icon fa fa-lock"></i>
</span>
</label>
<div class="space"></div>
<div class="clearfix">
<!--
<h:commandButton id="loginResetId"
styleClass=" width-35 pull-right btn btn-sm
btn-primary bigger-110"
value="Logout" action="#{auth.doLogOut()}">
</h:commandButton>
-->
<button type="submit" jsf:action="#{identity.doLogin()}"
class="width-35 pull-right btn btn-sm btn-primary">
<i class="ace-icon fa fa-key"></i> <span class="bigger-110">S'identifier</span>
</button>
<br></br> <br></br>
<h:panelGrid
rendered="#{not empty authentificationBean.message}">
<div class="alert alert-danger">
#{authentificationBean.message} <br />
</div>
</h:panelGrid>
</div>
<h:outputLink id="pdfLink" value="http://localhost:18080/openCars/pdf/tableauAssurance.pdf" style="color: #000000;text-decoration: underline"><h5><b>Annexe à l'avenant</b></h5></h:outputLink>
<p:tooltip id="toolTipTrack" for="pdfLink" value="Télécharger l'annexe de l'avenant" trackMouse="true" />
<div class="space-4"></div>
</fieldset>
</h:panelGrid>
</h:form>
<!--
<div class="social-or-login center">
<span class="bigger-110">Or Login Using</span>
</div>
<div class="space-6"></div>
<div class="social-login center">
<a class="btn btn-primary"> <i class="ace-icon fa fa-facebook"></i>
</a> <a class="btn btn-info"> <i class="ace-icon fa fa-twitter"></i>
</a> <a class="btn btn-danger"> <i
class="ace-icon fa fa-google-plus"></i>
</a>
</div>
-->
</div>
<!-- /.widget-main -->
<h:form id="loginNavId">
<div class="toolbar clearfix">
<div></div>
</div>
</h:form>
</div>
<!-- /.widget-body -->
</div>
<!-- /.login-box -->
</ui:define>
</ui:composition>
请登录。。。
信息中心
S’标识符
#{authenticationBean.message}
附录A l'avenant
div.ui-growl {
left: 50%;
right: 0;
margin-left:-150px;
}
而实际问题是什么？我看不到有人试图把咆哮放在中间。如果你删除loginForm等，它会起作用吗？我不知道如何将咆哮放在中心位置，而且效果很好。因此，如果你删除loginForm，则会将咆哮放在中心位置？然后看看loginform如何影响咆哮的位置我只在认证页面使用了咆哮，只是咆哮处于右上角的默认模式，我需要将其放在页面的中心，仅此而已。可能重复感谢您的回答。。。吹毛求疵：50%没有居中，至少不是咆哮的中心；-）添加左边的边距：-150px（咆哮宽度为300px）。事实上，它是@Kukeltje的副本。谢谢你的评论，我会更新答案以获得更为中心的结果。谢谢，但我认为最好将Q标记为副本。。。以div为中心的答案（供OP学习）中的更多信息可能是有史以来问得最多的主题：D，但它可以直接回答特定的谷歌搜索，例如，因为它包含一个简单而直接的咆哮选择器@KukeltjeYes，但OP从中学不到什么。因此，我甚至没有回答它，或者最初将它标记为副本。OP没有学会使用开发人员工具来查看它实际上都在一个div中，而是尝试应用css/selectorsa。没有学会用正确的术语使用搜索引擎，阅读了一个很酷的html5/css3解决方案，不需要知道它的大小。。。等因此，实际上，我们是在捕鱼，而不是学习如何捕鱼。。。（不，这不是对你的咆哮，一点也不是…-）干杯）