Question

helllo evryone。

我有4个div，我想在引导程序的一行中，但我有一些问题的对齐，这张图片显示了结果： It is looking like this now

图像不在一行中作为其他元素，文本x cm不在其div的中心

这是我的代码

＆＃13;

.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;
}

＆＃13;

    <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>

＆＃13;

谢谢

Answer 1

默认情况下，文本内容具有填充（10px）属性 ..在浏览器中检查时，只需向下滚动即可找到相应的属性行

引导中的垂直aling

1 个答案: