html - 在嵌套在 flex 行下的列中居中 div
问题描述
我正在尝试将 div 居中(水平和垂直)在class="centered-column"
嵌套在 flex 行下的列(它是带有 的列)内。
我尝试应用此答案以及此 css-tricks 指南中给出的信息,但没有成功。
这是代码:
span {
font-size: 20px;
}
.row {
display: -webkit-flex;
display: -ms-flexbox;
}
.col-md-8 {
background-color: lightblue;
}
.centered-column {
display: flex;
flex-direction: column;
justify-content: center;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container">
<div class="row">
<div class="col-md-4 text-center">
<div class="row">
<div class="col-md-12">
<span>Row number 1</span>
</div>
</div>
<div class="row">
<div class="col-md-12">
<span>Row number 2</span>
</div>
</div>
</div>
<div class="col-md-8">
<div class="centered-column">
<span>Some text<span>
</div>
</div>
</div>
我应该怎么做才能让它工作(注意我必须使用 Bootstrap 3)?
解决方案
你需要给出.centered-column
高度。否则,它有它的孩子的高度。孩子们垂直居中,但不在列中:
span {
font-size: 20px;
}
.row {
display: -webkit-flex;
display: -ms-flexbox;
}
.col-md-8 {
background-color: lightblue;
}
.centered-column {
display: flex;
flex-direction: column;
justify-content: center;
height: 100%;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container">
<div class="row">
<div class="col-md-4 text-center">
<div class="row">
<div class="col-md-12">
<span>Row number 1</span>
</div>
</div>
<div class="row">
<div class="col-md-12">
<span>Row number 2</span>
</div>
</div>
</div>
<div class="col-md-8">
<div class="centered-column">
<span>Some text<span>
</div>
</div>
</div>
推荐阅读
- unity3d - 变换 Unity 坐标
- php - PHP - 'openssl_decrypt' 函数有什么期望?
- c# - 如何在 WPF 中创建一个分成相等部分的圆并使用 GeometryDrawing 在每个部分中写入文本
- azure - 创建 Azure AD Api/Web 客户端应用程序的最佳方法是什么
- r - 根据最后一个反斜杠后的数字来处理某些数字变量
- php - 如何在不单击引导程序或 php 中的按钮的情况下在右上角加载通知警报?
- asp.net - 从基本文件夹而不是 bin 文件夹使用 web.config
- typescript - 子文件夹 node_modules 中的 @types 没有被 jest 拾取
- javascript - 使用剪贴画显示/幻灯片图像
- python - 查找一个列表的任何元素出现在另一个列表中的索引,并重复