错误 css:在 td 中与输入文本和图像垂直对齐
Error css: vertical align in td with input text and image
我有一个 table,其中一个单元格包含 2 个项目(输入文本和图像)。我尝试将它们垂直对齐,但它不起作用。
我尝试使用 vertical-align:middle
、margin top、padding、尝试设置 height: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/
将 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>
使用此代码,
input
里面campoOpcional
需要vertical-align
.campoOpcional input {
vertical-align: middle;
}
我有一个 table,其中一个单元格包含 2 个项目(输入文本和图像)。我尝试将它们垂直对齐,但它不起作用。
我尝试使用 vertical-align:middle
、margin top、padding、尝试设置 height: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/
将 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>
使用此代码,
input
里面campoOpcional
需要vertical-align
.campoOpcional input {
vertical-align: middle;
}