Центрирование окна ввода и кнопки значка

Question

Я хочу центрировать вертикально как поле ввода, так и кнопку значка. Я попробовал flexbox justify-content и align-content, и он все еще не работает. Есть ли способ в css, что я могу это сделать? Спасибо.

Answer 1

Вы должны обернуть их контейнера DIV, который будет иметь display:flex;. Всегда полезно использовать свойство flex-direction, в вашем случае это будет row.

Затем для выравнивания элементов по вертикали используйте align-item:center;. И если вы хотите, чтобы они были в горизонтальном положении, а затем добавьте justify-content:center; в css .container в приведенном ниже примере.

Я использовал изображение, а также шрифт-удивительный значок для значка поиска рядом с полем ввода. Поскольку вы не упомянули в вопросе, какой из них вы используете.

.container{ 
 
    display:flex; 
 
    flex-direction:row; 
 
    align-items:center; 
 
} 
 
.container input{ 
 
    line-height:80px; 
 
    margin:0 5px; 
 
} 
 
.container img{ 
 
    height:50px; 
 
    margin:0 5px; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<div class="container"> 
 
    <input type="text" placeholder="Search"/> 
 
    <i class="fa fa-search"></i> 
 
    <img src="http://www.chinabuddhismencyclopedia.com/en/images/thumb/b/b8/Nature.jpg/240px-Nature.jpg"> 
 
</div>

Answer 2

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

Пример: если оба они находятся внутри div, а высота этого div равна 40px, добавьте свойство line height к этому div и установите его на 40px.