[RESOLVIDO]p:commandButton Primafaces - Centralizar Value

24 de janeiro de 2013 18 respostas

evandro_araujo 24 de janeiro de 2013

Pessoal,

Gostaria de centralizar o “Enviar” conforme a imagem em anexo. Alguem pode me ajudar ??

segue abaixo meu codigo :

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

    <ui:define name="header">
        
    </ui:define>

    <ui:define name="subheader">
        
    </ui:define>

    <ui:define name="indexLeftColumn">
        
    </ui:define>

    <ui:define name="indexRightColumn">
        
        <h:form>  
            
            
                <p:panel style="left:100px; width:400px;height:200px;">
                    <f:facet name="header">
			  <h:outputText value="#{msg.login_titulo}" />
		     </f:facet>       
                    
                    
                        <h:panelGrid columns="3" styleClass="center-table" style="text-align:right;">                            
                            <h:outputText value="#{msg.login_usuario_login}:" />
                            <p:inputText id="#{msg.login_usuario_login}" value="" />  
                            
                            <p:message for="#{msg.login_usuario_login}" styleClass="mensagem-validacao" />
                            
                            <h:outputText value="#{msg.login_usuario_senha}:" />                            
                            
                            <p:password value=""
					required="true" id="#{msg.login_usuario_senha}" label="#{msg.login_usuario_senha}" />
                            
                                        
                                        <p:message for="#{msg.login_usuario_senha}" styleClass="mensagem-validacao" />
                            
                            <p:commandButton value="Enviar" style="height: 30px; width: 100px; horizontal-align:center;"/>                        
        		</h:panelGrid>

                </p:panel>                       
        </h:form>  
        
    </ui:define>


</ui:composition>

Bom dia a Todos

18 Respostas

kleberdamasco 24 de jan. de 2013

<p:commandButton value="Enviar" style="height: 30px; width: 100px; text-align:center;"/>

já tentou o text-align?

luan_gazin 24 de jan. de 2013

O segredo está no alinhamento do

<h:panelGrid columns="3" styleClass="center-table" style="text-align:right;">                              
                            <h:outputText value="#{msg.login_usuario_login}:" />  
                            <p:inputText id="#{msg.login_usuario_login}" value="" />    
                              
                            <p:message for="#{msg.login_usuario_login}" styleClass="mensagem-validacao" />  
                              
                            <h:outputText value="#{msg.login_usuario_senha}:" />                              
                              
                            <p:password value="" required="true" id="#{msg.login_usuario_senha}" label="#{msg.login_usuario_senha}" />  
                              
                          <p:message for="#{msg.login_usuario_senha}" styleClass="mensagem-validacao" />  

                          </h:panelGrid> 
                         <h:panelGrid columns="1" styleClass="center-table" style="text-align:right;">            
       
                            <p:commandButton value="Enviar" style="height: 30px; width: 100px; horizontal-align:center;"/>                          
                         </h:panelGrid>

evandro_araujo 24 de jan. de 2013

tentei dessa forma que vc me falou

<p:commandButton id="btnEnviar" value="Enviar" style="height: 30px; width: 100px; text-align:center;" actionListener="#{TabprodMbean.verificausuario()}"/>

mas nao deu certo…teria que alinhar horizontamente .

ninvit 24 de jan. de 2013

Você pode resolver assim…

No seu .css adicione

.centralizar {text-align: center;}

e use onde quiser

&lt;div class="centralizar"&gt;

kleberdamasco 24 de jan. de 2013

aqui tem um site bom de css
www.maujor.com

evandro_araujo 1 de fev. de 2013

tentei dessa forma

<h:panelGrid columns="3"  styleClass="center-table" style="text-align:right;">              
                                          
 
                            <p:commandButton action="#{tblusuMbean.verificausuario}"  style="height: 30px; width: 80px; text-align:center; horizontal-align:center;" value="Enviar" update="@form"/>                            
                                          
                            <h:outputText value="" />
                            <p:commandButton action="#{tblusuMbean.limpar}" value="Limpar" update="@form"/>                            
                  </h:panelGrid>

mas ele nao fica alinhado de acordo com o tamanho do botao

Alguem pode me ajudar ??

luan_gazin 1 de fev. de 2013

Tentou da forma como falei?

evandro_araujo 1 de fev. de 2013

cara, não deu certo .

giovani_sc 7 de fev. de 2013 1 like

Tente um p:outputPanel no lugar do h:panelGrid

<p:outputPanel style="width: 100%; text-align:center" layout="block">
           <p:commandButton value="Enviar" style="height: 30px; width: 100px"/>
</p:outputPanel>

evandro_araujo 7 de fev. de 2013

Cara nao deu certo , fiz assim , mas nao rolou

<p:outputPanel style="width: 100%; text-align:center" layout="block">  
           <p:commandButton value="Enviar" style="height: 20px; width: 100px"/>  
</p:outputPanel>

da uma olhada na imagem

rof20004 7 de fev. de 2013

Voce quer centralizar o botao ou o texto do botao ?

evandro_araujo 7 de fev. de 2013

O texto no caso seria “Enviar”

rof20004 7 de fev. de 2013

Retire o style

<p:commandButton value="Enviar"/>

evandro_araujo 7 de fev. de 2013

mas como vou diminuir a altura do botao e deixar o Texto "Enviar " centralizado ??

rof20004 7 de fev. de 2013

assim:

<h:form>    
              
              
                <p:panel style="width:300px;">  
                    <f:facet name="header">  
              			<h:outputText value="Autenticação" />  
             		</f:facet>         
                      
                      
                        <h:panelGrid columns="3" style="text-align:left;">                              
                            <h:outputText value="Login:" />  
                            <p:inputText id="login" value="" />    
                            <p:message for="login" />  
                              
                            <h:outputText value="Senha:" />                              
                            <p:password value=""  required="true" id="senha" label="Senha:" />  
                            <p:message for="senha" />  
                		</h:panelGrid>  
                		
                		<div align="center">
                			<p:commandButton value="Enviar" style="height: 30px; font-size: 12px"/>
  						</div>
  
                </p:panel>                         
        </h:form>

rof20004 7 de fev. de 2013

Basta voce diminuir o tamanho da fonte do texto do botao.

evandro_araujo 7 de fev. de 2013

cara quero agradecer pela dica, deu certo …faz dias que estava me matando …vlw mesmo …abc

giovani_sc 7 de fev. de 2013

ah! desculpe, achei que tu queria pôr o botão no meio.
Já tive um problema parecido e tive que diminuir a fonte.

Criado 24 de janeiro de 2013

Ultima resposta 7 de fev. de 2013

Respostas 18

Participantes 6

18 Respostas

Topicos relacionados