错误 css：在 td 中与输入文本和图像垂直对齐答案

【问题标题】：Error css: vertical align in td with input text and image错误 css：在 td 中与输入文本和图像垂直对齐
【发布时间】：2017-05-14 01:46:28
【问题描述】：

我有一个包含 2 个项目（输入文本和图像）的单元格的表格。我尝试将它们垂直对齐，但它不起作用。

我尝试使用vertical-align:middle，顶部边距，填充，尝试设置高度：100% 等...

代码很简单：

<table cellspacing="0" rules="all" border="1" id="Origen" style="width:100%;border-collapse:collapse;">
            <tr>
                <td class="cabeceraDG"> Origen</td><td class="cabeceraDG"> Centro</td><td class="cabeceraDG"> Usuario</td>
            </tr><tr style="white-space:nowrap;">
                <td class="campoOpcional">oficina</td><td class="campoOpcional" align="center" style="width:150px;">
                                <input name="Origen$ctl02$referenciaTextBox" type="text" value="0000" id="Origen_ctl02_referenciaTextBox" class="campoOpcional" onblur="return validate(this)" ref="0991" />
 <input type="image" name="Origen$ctl02$imgBtnGuardarCentro" id="Origen_ctl02_imgBtnGuardarCentro" title="Guardar" AutoPostBack="false" src="https://s30.postimg.org/usmf6nsn5/boton_Abonar.gif" onclick="return ASPxClientEdit.ValidateGroup();  msGuardar();" style="border-width:0px;" />
                             </td><td class="campoOpcional">TEST</td>
            </tr>
        </table>

这里有一个问题示例：https://jsfiddle.net/javierif/nmpmj1eh/

【问题讨论】：

标签： html css vertical-alignment css-tables

【解决方案1】：

将 vertical-align: middle 添加到 .campoOpcional input 即可使用 - 请参阅下面的演示：

.campoOpcional input {
  vertical-align: middle;
}

<table cellspacing="0" rules="all" border="1" id="Origen" style="width:100%;border-collapse:collapse;">
  <tr>
    <td class="cabeceraDG">Origen</td>
    <td class="cabeceraDG">Centro</td>
    <td class="cabeceraDG">Usuario</td>
  </tr>
  <tr style="white-space:nowrap;">
    <td class="campoOpcional">oficina</td>
    <td class="campoOpcional" align="center" style="width:150px;">
      <input name="Origen$ctl02$referenciaTextBox" type="text" value="0000" id="Origen_ctl02_referenciaTextBox" class="campoOpcional" onblur="return validate(this)" ref="0991" />
      <input type="image" name="Origen$ctl02$imgBtnGuardarCentro" id="Origen_ctl02_imgBtnGuardarCentro" title="Guardar" AutoPostBack="false" src="https://s30.postimg.org/usmf6nsn5/boton_Abonar.gif" onclick="return ASPxClientEdit.ValidateGroup();  msGuardar();"
      style="border-width:0px;" />
    </td>
    <td class="campoOpcional">TEST</td>
  </tr>
</table>

【讨论】：

【解决方案2】：

使用此代码，

input 里面的campoOpcional 需要vertical-align

.campoOpcional input {
  vertical-align: middle;
}

【讨论】：