[英]How do I vertically align label, input and button?
I am trying to vertically align input and label and button( which is inside a div) 我正在尝试垂直对齐输入,标签和按钮(位于div内)
How can I achieve this 我该如何实现
My present code which is not working is the following 我目前无法正常工作的代码如下
<table>
<tr>
<label style="display: inline-block;float: left; vertical-align: baseline; position: relative; padding-top :5px">Select File</label>
</tr>
<tr>
<input type="text" style="display: inline-block;float: left; vertical-align: baseline">
</tr>
<tr>
<div style="display: inline-block;vertical-align: baseline;float: left" class="file-upload btn" >
Browse
<input class="required file-upload-input" type="file">
</div>
</tr>
</table>
Seems like you're confusing tr
's with td
's. 似乎您将
tr
与td
混淆了。 You should use only one tr
(table row), and place your elements inside a td
(table cell) each. 您应该只使用一个
tr
(表行),并将每个元素放在一个td
(表单元格)中。
Then, get rid of the divs, and get rid of the inline styles you set to the elements... A td
is able to use vertical-align
property, which should be set to middle
, if you expect the align effect. 然后,摆脱div,摆脱为元素设置的内联样式...
td
可以使用vertical-align
属性,如果您期望对齐效果,则应将其设置为middle
。
<table>
<tr>
<td style="vertical-align:middle;">
<label>Select File</label>
</td>
<td style="vertical-align:middle;">
<input type="text" />
</td>
<td style="vertical-align:middle;">
<input class="required file-upload-input" type="file" />
</td>
</tr>
</table>
Try this 尝试这个
<table>
<tr vertical-align="middle">
<td>
<label style="display: inline-block;float: left; position: relative; padding-top :5px">
Select File
</label>
</td>
</tr>
<tr>
<td>
<input type="text" style="display: inline-block;float: left; vertical-align: baseline">
</td>
</tr>
<tr vertical-align="middle">
<td>
<div style="display: inline-block; float: left" class="file-upload btn" >
Browse
<input class="required file-upload-input" type="file">
</div>
<td>
</tr>
</table>
You also missed tags in rows 您还错过了行中的标签
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.