输入标签更大的尺寸和输入标签中的文本垂直居中
Posted
技术标签:
【中文标题】输入标签更大的尺寸和输入标签中的文本垂直居中【英文标题】:input tag bigger size and text in input tag centered vertically 【发布时间】:2012-08-24 10:27:27 【问题描述】:这是我需要做的表格:
现在我处于这一点:
如您所见,我需要将输入按钮创建得更大。否则在视觉上它不会起作用。我的问题是如何垂直创建更大的输入按钮,并且输入文本保持垂直居中在框的中间。
CSS 解决方案将是最好的。
如果有帮助,这是我的 html 代码:
<form name="bookingform" action="form-to-email.php" method="post">
<div id="form_box" class="gradient">
<div id="center_box">
<h3>WANT TO BOOK ME?</h3>
<div id="form_data">
<br>
<table>
<tr>
<td><input type="text" value="Company name" name="company" /></td>
<td class="tdright"><input type="text" value="Name" name="name" /></td>
</tr>
<tr>
<td><input type="text" value="Telephone" name="telephone" /></td>
<td class="tdright"><input type="text" value="Email" name="email" /></td>
</tr>
<tr>
<td><input type="text" value="Booking date" name="date" /></td>
<td><input type="button" /></td>
</tr>
</table>
</div>
<div id="form_text">
<br>
<textarea rows="10" cols="40" name="message">Your text...</textarea>
<input type="submit" value="SEND" name="submit" />
</div>
<input type="image" src="" name="Send" />
</div>
</div>
</form>
【问题讨论】:
【参考方案1】:input[type=button]
height: 35px; /* increase the height */
line-height: 35px; /* vertically align the text */
DEMO
【讨论】:
这个跨浏览器友好吗?以上是关于输入标签更大的尺寸和输入标签中的文本垂直居中的主要内容,如果未能解决你的问题,请参考以下文章
垂直居中 <span> 文本,位于更大的 <span> 旁边,都在 <div> 内