我在这里有这个设置，我有几个标签，右边是一个复选框。 我希望复选框与标签标签一起在中心垂直对齐。
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<br>
<br>
<div class="container">
<div class="row">
<div class="col-sm-6">
<ul class="nav nav-tabs" role="tablist">
<li id="tab_1" role="presentation" class="active"><a id="lnk_1" href="#">Tab1</a></li>
<li id="tab_2" role="presentation" class=""><a id="lnk_2" href="#)">Tab2</a></li>
<li id="tab_3" role="presentation" class=""><a id="lnk_3" href="#">Tab3</a></li>
</ul>
</div>
<div class="col-sm-6 pull-right">
<span><input id="cb_D" type="checkbox" onclick="/* do things */"><label for="cb_D">CB</label></span>
</div>
</div>
</div>我见过this answer但是添加了vcenter类并将其定义为给定的
.vcenter {
display: inline-block;
vertical-align: middle;
float: none;
}
不会为我做这个技巧，也不会将这些样式分配给具有列本身的div。我也尝试过使用display: table和table-cell以及vertical-align: middle，但这也不起作用。
不幸的是，Flexbox不是一个选项。
我添加了一些基本的CSS。这是你要求的吗？
.nav {
float: left;
}
#checkbox {
float: right;
padding: 10px 15px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<br>
<div class="container">
<ul class="nav nav-tabs" role="tablist">
<li id="tab_1" role="presentation" class="active"><a id="lnk_1" href="#">Tab1</a></li>
<li id="tab_2" role="presentation" class=""><a id="lnk_2" href="#">Tab2</a></li>
<li id="tab_3" role="presentation" class=""><a id="lnk_3" href="#">Tab3</a></li>
</ul>
<div id="checkbox">
<input id="cb_D" type="checkbox" onclick="/* do things */">
<label for="cb_D">CB</label>
</div>
</div>我将导航浮动到左侧，右侧的复选框使它们显示在彼此旁边。我还查看了Bootstrap填充应用于选项卡的数量，并在checkbox-div上使用了相同的内容。
在这里你可以使用line-height和vertical-align：middle来应用特定的css;
.customvcent,.customvcent *{
line-height:42px;
vertical-align:middle;
}
.customvcent input[type=checkbox]{
margin:0px;
}
.customvcent label{
margin-bottom:0px;
}<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
</head>
<body>
<br/>
<br/>
<div class="container">
<div class="row">
<div class="col-sm-6 col-xs-8">
<ul class="nav nav-tabs" role="tablist">
<li id="tab_1" role="presentation" class="active"><a id="lnk_1" href="#">Tab1</a></li>
<li id="tab_2" role="presentation" class=""><a id="lnk_2" href="#)">Tab2</a></li>
<li id="tab_3" role="presentation" class=""><a id="lnk_3" href="#">Tab3</a></li>
</ul>
</div>
<div class="col-sm-6 col-xs-4">
<span class="customvcent pull-right"><input id="cb_D" type="checkbox" onclick="/* do things */"><label for="cb_D">CB</label></span>
</div>
</div>
</div>
</body>
</html>您可以简单地在现有行类中添加样式，或者如果您不想打扰在元素中添加新类，如下所示
<div class="middle-row row">
CSS
.middle-row {
display: flex;
align-items: center;
}
如果你愿意，你也可以选择align-items：flex-end;