Question

我试图在bootstrap 3上使用自定义css，但失败了。我想要的是（在大屏幕上）：

组合框位于左侧的垂直中心。

位于中心的h3标题（此项目最高）。

位于底部的日期标记（此项目最短）位于右侧。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>test</title>
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js" />
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js" />
    <![endif]-->
    <style>
        .vcenter {
                vertical-align:middle
        }
        .vbottom {
                vertical-align:bottom
        }
    </style>
  </head>
<body>
<div class="container">
<form class="form-horizontal bg-info" role="form">
  <div class="form-group">
    <div class="col-md-4 vcenter">
      <div class="input-group input-group-lg">
        <select class="form-control">
          <option>a</option>
          <option>b</option>
        </select>
      </div>
    </div>
    <div class="col-md-6">
      <h3><a href="#">Title</a></h3>
    </div>
    <div class="col-md-2 vbottom">
      <p class="text-right"><small>2014.09.03</small></p>
    </div>
  </div>
</form>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" />
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js" />
</body>
</html>

Answer 1

试试这个：

用于垂直对齐display: table-cell

 .vcenter {
                vertical-align:middle;
                display:table-cell;

        }

Answer 2

使用内联padding-top，此处为demo

左栏：身高46px，加5 px（=（56-46）/ 2）
中间栏：高度56px
右栏：高度30px，增加26 px（= 56-30）

缺点：

应手动计算。
此方法适用于宽屏幕。它将在手机上获得额外的高度。

在bootstrap 3上使用自定义css的垂直对齐列

2 个答案: