Question

我有一行有两个cols

＆＃13;

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

＆＃13;

我希望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>

Bootstrap垂直对齐cols在一行

1 个答案: