如何垂直對齊標籤，輸入和按鈕？

如何能夠做到這不工作這

我現在的代碼如下

<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>

來源

2014-09-03 user3779089

您應該嘗試應用vertical-align對話框中的垂直對齊... – alexmngn 2014-09-03 18:49:25

嘗試vertical-align：50％; （或中等）。另外，你的HTML是無效的，你可以（應該）在沒有表格的情況下做到這一點，只是div – Devin 2014-09-03 18:49:26

如果你刪除垂直對齊，而是在標籤上添加top：3px，你可以實現中間定位。有效的表格式是'

'有時你可以逃脫做你在這裏存在，但不感到驚訝，一半工作，如果瀏覽器不使他們的方式，你希望它的東西。 – scrappedcola 2014-09-03 18:55:06

-1

試試這個

<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>

你也錯過了標籤行

來源

2014-09-03 18:53:00

對不起，這不起作用，它會在不同的行上顯示每個tr – user3779089 2014-09-03 19:02:03

@ user3779089：你可以創建一個小提琴並確切地告訴你想要什麼嗎？ – 2014-09-03 19:15:14

我覺得你的意思是' – 2014-09-03 21:08:31

好像你很混淆tr的td的s。您應該只使用一個tr（表格行），並將您的元素分別放入td（表格單元格）中。

然後，甩掉的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>

來源

2014-09-03 19:15:47 LcSalazar

如何垂直對齊標籤，輸入和按鈕？

回答

相關問題