2015-05-05 2 views
0

FiddleВертикально выровнять вход?

Мне нужно вертикально выровнять вход в его родительском устройстве вместе с его меткой.

Я попробовал метод ячейки таблицы, но не повезло:

<div class="holder"> 
    <label>Text input: </label> 
    <input type="text" class="input" /> 
</div> 

.holder{ 
    height: 400px; 
    width: 400px; 
    background: tomato; 
    display: table; 
} 

.input{ 
    display: table-cell; 
    vertical-align: middle; 
} 

ответ

2

Там нет необходимости для сервировки стола, так как контейнер с фиксированной высотой, используйте line-height свойство вместо вашего .holder элемента:

line-height:400px; 

JSFiddle

0

Сделать .holder ячейка таблицы.

.holder{ 
    height: 400px; 
    width: 400px; 
    background: tomato; 
    display: table-cell; 
    vertical-align: middle; 
} 

.input{ 
    /* remove the styles */ 
} 

Updated Fiddle

0

Попробуйте line-height собственность на родителей. Установите его на 400px, чтобы все содержимое было выровнено по вертикали.

Смотрите этот пример: https://jsfiddle.net/xhg15p5L/

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