如何居中這些元素？

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>

預覽