2012-08-29 42 views
2

居中這是我需要做的形式:輸入標籤更大的大小和文字垂直

enter image description here

現在我在這一點上我:

enter image description here

正如你可以觀察到的,我需要創建更大的輸入按鈕。否則,視覺上不起作用。我的問題是如何創建垂直放大的輸入按鈕,輸入文本垂直居中放置在盒子中間。

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> 

回答

3
input[type=button] { 
    height: 35px;  /* increase the height */ 
    line-height: 35px; /* vertically align the text */ 
} 

DEMO

+0

這是跨瀏覽器友好嗎? –

+0

絕對 - 即使在舊的IE-s :) :) –

+0

甜!非常感謝你!!! –