一行两列
<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
垂直对齐?
最佳答案
要对齐列的内容,它们首先需要具有相同的高度。
有两种基本的 CSS 方法(不涉及固定值)用于均衡高度。
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>
关于html - Bootstrap 垂直对齐一行中的列,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36715629/