【问题标题】: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>

【问题讨论】:

    标签: css input textinput


    【解决方案1】:
    input[type=button] {
        height: 35px;      /* increase the height */
        line-height: 35px; /* vertically align the text */
    }
    

    DEMO

    【讨论】:

    • 这个跨浏览器友好吗?
    猜你喜欢
    • 2015-09-23
    • 2015-02-25
    • 1970-01-01
    • 2011-11-16
    • 2012-05-08
    • 1970-01-01
    • 2020-08-12
    • 2016-07-29
    • 2016-10-08
    相关资源
    最近更新 更多