[英]Bootstrap: How to center a p Element vertically in a div?
How can I vertically center this multiple Line p Element in this div while keeping it at the left side of the page? 如何在该div中将多个Line p元素垂直居中,同时将其保持在页面左侧?
I tried already to display the parent div as table but this seems to be marked as !important in the bootstrap css. 我已经尝试将父div显示为表,但是在引导CSS中似乎将其标记为!important。
Thanks! 谢谢!
<div class="row">
<div class="col-3">
<img src="images/pk1.jpg" alt="Telefon">
</div>
<div class="col-9">
<p>asdadadas<br>asdasdasad</p>
</div>
</div>
Try this: 尝试这个:
<div class="row">
<div class="col-3">
<img src="images/pk1.jpg" alt="Telefon">
</div>
<div class="col-9 text-center">
<p>asdadadas<br>asdasdasad</p>
</div>
</div>
<div class="row">
<div class="col-sm-3">
< img src="images/pk1.jpg" alt="Telefon">
</div>
<div class="col-sm-9 text-center">
<p>example</p>
</div>
</div>
Since you're using v4, use flexbox! 由于您使用的是v4,因此请使用flexbox!
Align items vertically with Bootstrap v4 使用Bootstrap v4垂直对齐项目
<div class="row">
<div class="col-3">
<img src="images/pk1.jpg" alt="Telefon">
</div>
<div class="col-9 d-flex align-items-center">
<p>asdadadas<br>asdasdasad</p>
</div>
</div>
You can use flex
technique to achieve this vertical center align with single selector. 您可以使用
flex
技术通过单个选择器实现此垂直中心对齐。
.vertical-center {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-align: center;
-webkit-align-items: center;
-webkit-box-align: center;
align-items: center;
}
And in markups should add this CSS selector: 并且在标记中应添加以下CSS选择器:
<div class="row">
<div class="col-3">
<img src="images/pk1.jpg" alt="Telefon">
</div>
<div class="col-9 vertical-center">
<p>asdadadas<br>asdasdasad</p>
</div>
</div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.