html - Bootstrap 垂直对齐一行中的列

Question

一行两列

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div class="row">
              <div class="col-xs-1">
                Аты
                Имя
              </div>
              <div class="col-xs-11">
                name
              </div>
</div>

我想 name 字符串位于第一个 col 的中心

如何使第二个 col 元素与第一个 col 垂直对齐？

Answer 1

要对齐列的内容，它们首先需要具有相同的高度。

有两种基本的 CSS 方法(不涉及固定值)用于均衡高度。

Codepen Demo

CSS 表格

.row div {
  border: 1px solid grey;
}
.table {
  display: table;
}
.table div {
  float: none;
  display: table-cell;
  vertical-align: middle;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row table">
    <div class="col-xs-1 ">
      Аты Имя
    </div>
    <div class="col-xs-11">
      name
    </div>
  </div>
</div>

flexbox

.row div {
  border: 1px solid grey;
}

.flex {
  display: flex;
}

.flex div {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row flex">
    <div class="col-xs-1 ">
      Аты Имя
    </div>
    <div class="col-xs-11">
      name
    </div>
  </div>
</div>