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>两个宽度。

＆＃13;

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

＆＃13;

<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>

＆＃13;

预览

如何集中这些元素？

1 个答案: