How to center these elements? - html

Question

I want to center horizontally these elements :
<table width="100%" border="0">
<tr>
<td align="center" style="border-width: 0px;"><label >Filiè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ées" /></a>
</td>
</tr>
</table>
At runtime I get this :
As you can see the elements are not very well centered horizontally. So how to center them horizontally ?

Answer 1

The labels are not of same size. So you need to give a fixed width to the left column and align the text to the right. Using the following CSS this can be made perfect. But at the same time, if you want the center to be the separation, then you can give both the <label> and <select>, the same width.
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è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ées" /></a>
</td>
</tr>
</table>
Preview