Как центрировать эти элементы?

Question

Я хочу центрирование по горизонтали этих элементов:

<table width="100%" border="0"> 
    <tr> 
     <td align="center" style="border-width: 0px;"><label >Fili&egrave;re : </label> 
     <select name="id_filiere" id="id_filiere" width="100px" tmt:required="true" tmt:message=""> 
      <option value="0">-- Selectionnez --</option> 
      {foreach $toFilieres as $oFiliere} 
      <option value="{$oFiliere->id_filiere}">{$oFiliere->lib_filiere}</option> 
      {/foreach} 
     </select> 
     </td> 
    </tr> 
    <tr> 
     <td align="center" style="border-width: 0px;"><label >Session : </label> 
      <select name="id_session" id="id_session" width="100px" tmt:required="true" tmt:message=""> 
      <option value="0">-- Selectionnez --</option> 
      </select> 
     </td> 
    </tr> 
    <tr> 
     <td align="center" style="border-width: 0px;"><label >Phase : </label> 
      <select name="id_phase" id="id_phase" width="100px" tmt:required="true" tmt:message=""> 
      <option value="0">-- Selectionnez --</option> 
      </select> 
     </td> 
    </tr> 
    <tr> 
     <td align="center" style="border-width: 0px;"> 
      <label >Epreuve : </label> 
      <select name="id_matiere" id="id_matiere" width="100px" tmt:required="true" tmt:message=""> 
      <option value="0">-- Selectionnez --</option> 
      </select> 
     </td> 
    </tr> 
    <tr> 
     <td align="center" style="border-width: 0px;"> 
      <input id="btnRech" type="button" value="Rechercher" /> 
      <a id="Verouillage" href="#popupVerouillage"><input id="btnVerouillage" type="button" value="Verrouiller sujet" /></a> 
      <a id="ExporterSujet" href="#popupExporterSujet"><input id="btnExporterSujet" type="button" value="Exporter donn&eacute;es" /></a> 
     </td> 
    </tr> 
</table> 

Во время выполнения я получаю это: Как вы можете видеть, что элементы не очень хорошо центрируются по горизонтали. Итак, как сосредоточить их по горизонтали?

Answer 1

Этикетки не одного размера. Поэтому вам нужно указать фиксированный width в левый столбец и выровнять текст вправо. Используя следующий CSS, это можно сделать совершенным. Но в то же время, если вы хотите, чтобы центр был разделом, вы можете дать как <label>, так и <select>, такую ​​же ширину.

label {display: inline-block; width: 100px; text-align: right;} 
 
select {display: inline-block; width: 150px;}

<table width="100%" border="0"> 
 
    <tr> 
 
    <td align="center" style="border-width: 0px;"><label >Fili&egrave;re : </label> 
 
     <select name="id_filiere" id="id_filiere" width="100px" tmt:required="true" tmt:message=""> 
 
     <option value="0">-- Selectionnez --</option> 
 
     {foreach $toFilieres as $oFiliere} 
 
     <option value="{$oFiliere->id_filiere}">{$oFiliere->lib_filiere}</option> 
 
     {/foreach} 
 
     </select> 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td align="center" style="border-width: 0px;"><label >Session : </label> 
 
     <select name="id_session" id="id_session" width="100px" tmt:required="true" tmt:message=""> 
 
     <option value="0">-- Selectionnez --</option> 
 
     </select> 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td align="center" style="border-width: 0px;"><label >Phase : </label> 
 
     <select name="id_phase" id="id_phase" width="100px" tmt:required="true" tmt:message=""> 
 
     <option value="0">-- Selectionnez --</option> 
 
     </select> 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td align="center" style="border-width: 0px;"> 
 
     <label >Epreuve : </label> 
 
     <select name="id_matiere" id="id_matiere" width="100px" tmt:required="true" tmt:message=""> 
 
     <option value="0">-- Selectionnez --</option> 
 
     </select> 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td align="center" style="border-width: 0px;"> 
 
     <input id="btnRech" type="button" value="Rechercher" /> 
 
     <a id="Verouillage" href="#popupVerouillage"><input id="btnVerouillage" type="button" value="Verrouiller sujet" /></a> 
 
     <a id="ExporterSujet" href="#popupExporterSujet"><input id="btnExporterSujet" type="button" value="Exporter donn&eacute;es" /></a> 
 
    </td> 
 
    </tr> 
 
</table>

Просмотр