Как вертикально выровнять метку, ввод и кнопку?

Я пытаюсь вертикальным выравниванием ввода и метки и кнопок (которая находится внутри DIV)Как вертикально выровнять метку, ввод и кнопку?

Как я могу добиться этого

Моего настоящего кода, который не работает следующая

<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

Вы должны попытаться применить выравнивание по вертикали по tr ... – alexmngn

попробуйте выполнить вертикальный вылет: 50%; (или средней). Кроме того, ваш HTML недопустим, и вы можете (должны) делать это без таблиц, просто divs – Devin

Если вы удалите выравнивание по вертикали, а вместо этого добавьте top: 3px на этикетках, вы можете достичь среднего позиционирования. Действительный формат таблицы '

' вы можете иногда уйти с делать половину работы Вы представляете здесь, но не удивляйтесь, если браузер не делает то, что они, как вы хотите его. – scrappedcola

-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

@ user3779089: можете ли вы создать скрипку и точно сказать, что хотите? –

Я думаю, вы имели в виду '' –

Похоже, вы в заблуждении tr с td. Вы должны использовать только один tr (таблица строк) и поместить свои элементы внутри ячейки td (ячейка таблицы).

Тогда, чтобы избавиться от дивы, и избавиться от стилей инлайн вы установили для элементов ... A 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

Как вертикально выровнять метку, ввод и кнопку?

ответ

Смежные вопросы