如何在Bootstrap 3中将一个div对齐到另一个div？

我有以下的html。与input字段相比，我的label在中心没有垂直对齐。如何在Bootstrap 3中将一个div对齐到另一个div？

<div class="row"> 
    <div class="col-sm-5"> 
     <label for="investmentbalance" class="control-label pull-right">Investment Balance</label> 
    </div> 
    <div class="col-sm-2"> 
     <input type="text" readonly="readonly" value="28500.00" class="form-control" name="investmentbalance" id="investmentbalance"> 
    </div> 
</div>

如何设置都input和label具有相同的高度？

的jsfiddle

https://jsfiddle.net/mLcrv19z/

来源

2015-06-22 abiieez

您可以使用边距 – geo

你将需要在那里创造一些额外的列数。一行应该有12个分配的列;目前你有7（5 + 2）。 – tmutton

为了让两个元素（标签和输入），以垂直对齐，请尝试使用form-inline类，有form-group一起。这里是什么样子：

<div class="form-inline"> 
     <div class="form-group"> 
      <label for="investmentbalance">Investment Balance</label> 
      <input type="text" readonly="readonly" value="28500.00" class="form-control" name="investmentbalance" id="investmentbalance" /> 
     </div> 
</div>

https://jsfiddle.net/mLcrv19z/10/

来源

2015-06-22 11:57:12 ganders

您可以同时使用padding或line-height。

添加到label：

padding: 7px;

或：

line-height: 34px;

输入高度是20像素;填充6和余量1.因此，这里的计算：

填充：6 + 1 = 7px的

行高：20 + 7（顶部）+ 7（底部）= 34像素

来源

2015-06-22 09:26:59

您可以使用margin-top:3%;到label CSS

值是基于的jsfiddle例子。它可能会根据您正在开发的应用程序而改变。

来源

2015-06-22 09:28:53 geo

最好提供一般用途的答案 –

他可能会有一个关于保证金制度的想法。让他试用自己的应用程序.. – geo

问题不在您的对齐中，而在于您定义的类。您需要为每个宽度定义bootstrap grid类。否则，网格在不同分辨率下会显示不同。看一下这个。

<div class="col-sm-10 col-md-10 col-xs-10"> 

<div class="col-sm-2 col-md-2 col-xs-2">

小提琴Solution

来源

2015-06-22 09:37:43 AngularHarsh

另一种解决方案是使用一个自定义类，设置它的行高等于父的高度和在中间对齐。

.middle { 
 
    vertical-align: middle; 
 
    line-height: 34px; 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="container-fluid"> 
 
    <div class="row middle"> 
 
    <div class="col-xs-5"> 
 
     <label for="investmentbalance" class="control-label pull-right">Investment Balance</label> 
 
    </div> 
 
    <div class="col-xs-7"> 
 
     <input type="text" readonly="readonly" value="28500.00" class="form-control" name="investmentbalance" id="investmentbalance"> 
 
    </div> 
 
    </div> 
 
</div>

来源

2015-06-22 09:38:01

如何在Bootstrap 3中将一个div对齐到另一个div？

回答

相关问题