вертикальное выравнивание в бутстрапе

75
6

helllo evryone.

У меня есть 4 divs, которые я хочу быть в одной строке в bootstrap, но у меня есть некоторые проблемы с выравниванием, на этом рисунке показан результат: теперь это выглядит так

изображение не находится в одной строке, так как другой элемент и текст x см не находятся в центре его div

это мой код

.flt{
float: left
}
.info-ingr{
background-color: #5bc0de;
margin-left: 40px;
height: 34px;
color: white;
}

.alginement{
height: 100px;
width: 100%;
background-color: #faa;
display: inline-block;
vertical-align: middle;
}

    <div id="painchamp0" class="collapse">
<div class="row">
<div class="col-xs-10 col-sm-10 col-md-2 ">
<img src="https://thumbs.dreamstime.com/x/long-loaf-bread-22826883.jpg" class="img-responsive"><!--"img/pain-sandwich"-->
</div>

<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
<select class="ste form-control" id="painList0">
<option>Select type de pain :</option>
<option>Pain complet</option>
<option>Pain aux céréales</option>
<option>Pain au seigle</option>
<option>Pain au levain</option>
<option>Pain aux épices</option>
<option>Pain aux figues</option>
</select>
</div>
<div class="col-xs-3 col-sm-3 col-md-1 col-lg-1" >
<input type="number" step="8" value="0" min="0" max="64" placeholder="largeur de pain :" id="painQuantite0" class="form-control flt">

</div >
<div class="col-xs-1 col-sm-1 col-md-1 col-lg-1 align-lg-middle alginement" >
x cm
</div>
<div class="col-xs-1 col-sm-1 col-md-1 col-lg-1">

<button id="painBTN0" type="button" class="btn btn-info btn-md flt">
ok
</button>

</div>

</div>
</div>

благодарю вас

спросил(а) 2021-01-19T12:24:12+03:00 2 месяца, 3 недели назад
1
Решение
97

По умолчанию текстовое содержимое с атрибутом padding (10px). Просто просмотрите прокрутку, чтобы найти соответствующую строку свойства, пока вы проверяете ее в браузере.

ответил(а) 2021-01-19T12:24:12+03:00 2 месяца, 3 недели назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема