これらの要素を中央に配置するにはどうすればよいですか？

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>の両方を与えることができます。 CSSの固定幅を持つすべての `` タグ、ラベル{幅 `のようなものを設定し

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>

プレビュー