[英]How to make child content vertically in center as respect to parent container in bootstrap 4
我一直在尝试根据父容器使我的孩子内容垂直居中。 但是子容器始终相对于父容器。 以下是我尝试过的代码:
的HTML
<section id="welcome" class="bg-primary d-flex flex-column">
<h1>Positions</h1>
<div class="container text-center my-auto">
Centered content
</div>
</section>
的CSS
#welcome{
min-height:150px;
width: 200px;
}
我正在寻找的是使“ 居中内容”文本按照整个部分垂直居中。
这是codepen链接: CodePen
只需将h1
position-absolute
设为position-absolute
即可将其从DOM中的相对位置中删除...
https://codepen.io/anon/pen/EeVXbe
<section id="welcome" class="bg-primary d-flex flex-column">
<h1 class="position-absolute">Positions</h1>
<div class="container text-center my-auto">
Centered content
</div>
</section>
您的h1元素是导致其未对齐的原因。 如果您摆脱它(只是为了测试),您会看到居中的内容移到了中心。
显示:flex; 适用于所有直接子元素,因此您要对齐h1和#welcome元素的总高度。 要将居中的内容放置在一个大正方形的中心,可以将#welcome上的某些样式应用于.my-auto:
.my-auto {
min-height: 150px;
display: flex;
align-items: center;
justify-content: center;
background: blue;
}
align-items是使用display:flex时的垂直对齐方式。 但是,如果使用flex-direction:列,则方向是“旋转的”,因此您将使用justify-content:center,通常用于水平对齐。
另一种方法是在要居中的内容的顶部和底部使用填充:
.my-auto {
padding: 50px 0; /* 50px is an arbitrary number, just to demonstrate */
}
请注意,这将导致居中的内容将所有其他元素垂直推离它。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.