Выровнять входной файл на входном текстовом поле Bootstrap

Question

Я попытался создать свою собственную базу входных файлов на этом fiddle Мне нужно правильно выровнять кнопку во входном тексте бутстрапа.

это мой код для дизайна моего типа ввода. также кнопка бутстрапа не выравнивается.

.forUplBtn { 
    background-color:#427db8; 
    width:50px; 

    display:inline-block; 
    border: none; 
    color: #fff; 
    padding:5px 20px 5px 20px; 
    border:none; 
    overflow:hidden; 
    text-align:center; 
    position:relative; 
    margin:0; 
} 
.forUplBtn a{ 
    z-index:-1; 
} 



.forUplBtn input[type="file"]{ 
    /*margin-left:-145px;*/ 
    width: 100%;height:100%; position:absolute; left:0;top:0; opacity:0 
} 

Answer 1

Попробуйте добавить vertical-align:top к .forUplBtn и добавить для кнопки загрузки:

.uplPhot a button{ 
vertical-align:top; 
} 

Answer 2

Добавить ниже css в код

button { 
    position: absolute; 
    margin-left: -90px; 
    width: 90px; 
    margin-top:4px 
} 

Проверить это Fiddle

Также проверьте Jasny's fork Bootstrap для загрузки файлов, легко интегрируется.