Comment aligner deux champs de texte

Question

Je dois aligner deux champs de texte dans la même rangée, mais l'un à gauche et l'autre au centre de la page. J'essaie ceci:

<div class="pure-g margin-1-0"> 
      <div class="pure-u-1-4"> 
       <label for="tipologia"> 
        <fmt:message key="label.table.lavorazioni.spese.tipologia"/> 

       </label> 

       <s:textfield cssClass="pure-u-23-24 required" size="35" name="" id="tipologia" /> 
      </div> 
      <div class="pure-u-1-4" style="align:center"> 
       <label for="valore"> 
        <fmt:message key="label.table.lavorazioni.spese.valore"/> 

       </label> 

       <s:textfield cssClass="pure-u-23-24 required" size="35" name="" id="valore" /> 
      </div> 
     </div> 

Mais je vois celui de gauche correctement mais l'autre reste à côté du premier et pas au centre.

Une suggestion?

Answer 1

Pour aligner des éléments à l'intérieur du conteneur, utilisez la règle css text-align. Les balises Struts2 utilisent des thèmes pour générer du contenu supplémentaire dans les formulaires. Cela pourrait donc casser la conception initiale.

<div class="pure-g margin-1-0"> 
 
      <div class="pure-u-1-4" style="text-align:center"> 
 
       <label for="tipologia"> 
 
        <fmt:message key="label.table.lavorazioni.spese.tipologia"/> 
 

 
       </label> 
 

 
       <input type="text" class="pure-u-23-24 required" size="35" name="" id="tipologia" /> 
 
      </div> 
 
      <div class="pure-u-1-4" style="text-align:center"> 
 
       <label for="valore"> 
 
        <fmt:message key="label.table.lavorazioni.spese.valore"/> 
 

 
       </label> 
 

 
       <input type="text" class="pure-u-23-24 required" size="35" name="" id="valore" /> 
 
      </div> 
 
     </div>

JSFiddle